load-more-yuxialin v1.0.5

瀑布流插件

后端如果一次性返回成千上万条数据，想要实现“滚动触底，加载更多”的效果，那么可以在产品组件的外层套用这个LoadMore瀑布流插件

作者：雨下林(李佳霖)

一、安装

npm i load-more-yuxialin -S

或

yarn add load-more-yuxialin

二、vue项目入口文件调用

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

import LoadMore from 'load-more-yuxialin'

Vue.use(LoadMore)

三、组件中使用

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

<Products :arr="GoodsDataArr" />

现在可以改写为：

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

四、参数注释

• bigarr 代表原数组（大数组）
• size 代表每次滚动时显示多少项(Number类型)
• smallarr 代表处理过后分发出来的数组（小数组）

重点：调用者只需要对 <LoadMore></LoadMore>组件上的bigarr 和 size 属性传入对应参数即可。