@vant/waterfall

    1.0.2 • Public • Published

    Waterfall 瀑布流

    Install

    NPM

    npm i @vant/waterfall -S

    YARN

    yarn add @vant/waterfall

    使用指南

    全局注册

    import Vue from 'vue';
    import Waterfall from '@vant/waterfall';
    
    Vue.use(Waterfall);

    局部注册

    如果你只是想在某个组件中使用Waterfall,可以在对应组件中注册Waterfall指令,这样只能在你注册的组件中使用Waterfall

    import Waterfall from '@vant/waterfall';
    
    export default {
      directives: {
        WaterfallLower: Waterfall('lower'),
        WaterfallUpper: Waterfall('upper')
      }
    };

    代码演示

    基础用法

    使用 v-waterfall-lower 监听滚动到达底部,并执行相应函数。若是函数执行中需要异步加载数据,可以将 waterfall-disabled 指定的值置为 true,禁止 v-waterfall-lower 监听滚动事件

    注意:waterfall-disabled 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值,类型是字符串

    <ul
      v-waterfall-lower="loadMore"
      waterfall-disabled="disabled"
      waterfall-offset="400"
    >
      <li v-for="item in list">{{ item }}</li>
    </ul>
    export default {
      data() {
        return {
          list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
          disabled: false
        };
      },
    
      directives: {
        WaterfallLower: Waterfall('lower')
      },
    
      methods: {
        loadMore() {
          this.disabled = true;
          setTimeout(() => {
            for (let i = 0; i < 5; i++) {
              this.list.push(this.list.length);
            }
            this.disabled = false;
          }, 200);
        }
      }
    };

    API

    参数 说明 类型 默认值 版本
    v-waterfall-lower 滚动到底部, 触发执行的函数 Function - -
    v-waterfall-upper 滚动到顶部, 触发执行的函数 Function - -
    waterfall-disabled 在 vue 对象中表示是否禁止瀑布流触发的 key 值 string - -
    waterfall-offset 触发瀑布流加载的阈值 number 300 -

    Keywords

    none

    Install

    npm i @vant/waterfall

    DownloadsWeekly Downloads

    5

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    14.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • nemo-shen
    • chenjiahan
    • cookfront
    • pangxie1991
    • rex-zsd