load-more-qq v1.0.6

瀑布流插件

后端如果一次性返回成千上万条数据,那么可以在产品组件的外层套用这个LoadMore插件

一.安装

npm i load-more-qq -S

或

yarn add load-more-qq

二.vue项目入口文件调用

在vue项目的入口文件main.js写入一下代码:

import LoadMore from 'load-more-qq'

Vue.use(LoadMore)

三.组件中使用

找到产品列表组件的外层,原本如果是这种一次性渲染的写法:

<Products :arr="goodsArr" />

现在可以改为:

<LoadMore :bigarr="goodsArr" :size="8">
    <Products slot-scope="scope" :arr="scope.samllarr" />
</LoadMore>

四.参数注释

• bigarr 代表原数组（大数组）

• samllarr 代表处理过后分发出来的数组（小数组）

• size 代表每次滚动时显示多少项

  重点:调用者只需要对 bigarr 和 size 属性传入对应的参数即可