Neatly Packaged Modules

    waterfall-vue2

    1.0.2 • Public • Published

    Waterfall

    瀑布流组件

    使用指南

    import { Waterfall } from "waterfall-vue2";
    Vue.use(Waterfall);

    代码演示

    基础用法

    <Waterfall
      :pageData="pageData"
      :columnCount="2"
      :colStyle="{display:'flex',flexDirection:'column',alignItems:'center'}"
      query-sign="#cardItem"
      @wfLoad="onLoad"
      @ObserveDataTotal="ObserveDataTotal"
    >
      <template #default="{ item, columnIndex, index}">
        <!--  slot 内容  good-card:事例组件 -->
        <good-card :item="item" id="cardItem" />
      </template>
    </Waterfall>
    export default {
      name: 'waterfall-demo',
      data() {
        return {
          pageData: []
        };
      },
      methods: {
        onLoad() {
            // 数据请求
            const data = request(....)
            // 当前页的数据
            this.pageData =data;
        },
         ObserveDataTotal(length) {
          console.log(length);
        }
      }
    }

    API

    参数 说明 类型 默认值 版本
    columnCount 列数 Number 2 -
    pageData 当前 pageIndex 请求的数据(非多页累加数据) Array [] -
    resetSign 重置数据(清空每列数据) Boolean false -
    immediateCheck 立即检查 Boolean true -
    offset 触发加载的距离阈值,单位为px String|Number 300 -
    colStyle 每列的样式 Object {} -
    querySign 内容标识(querySelectorAll选择器) String 必须项 -

    Event

    事件名 说明 参数
    wfLoad 滚动条与底部距离小于 offset 时触发 -
    ObserveDataTotal 未渲染的数据总数 length

    Slot

    名称 说明
    default 插槽内容
    columnIndex 当前内容所在的列
    item 单条数据
    index 当前数据所在列的下标

    源码地址

    源码地址请参见 github

    Install

    npm i waterfall-vue2

    DownloadsWeekly Downloads

    2

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    12 kB

    Total Files

    5

    Last publish

    Collaborators

    • zengxiangfu