瀑布流插件

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

作者:emoquan

一、安装

npm i loadmore-quanq -S

或

yarn add loadmore-quanq

二、Vue项目入口文件调用

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

import LoadMore from 'loadmore-quanq'

Vue.use(LoadMore)

三、在组件中使用

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

<Product :arr="goodsArr" />

现在可以改写为:

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

四、参数注释:

bigarr表示原数组(大数组)

smallarr代表处理过后分发出来的数组(小数组)

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

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