每当我们一个页面加载到非常多的数组项时,想要实现“滚动触底,加载更多”的效果,可以使用这个插件。
作者:李也
npm i load-more-lcs -S
或
yarn add load-more-lcs
在vue项目的入口文件 main.js
中:
import LoadMore from 'load-more-lcs'
Vue.use(LoadMore)
在产品列表组件上做修改,举例: 如原来的组件是这么使用的:
<Products :arr="listArr" />
现在改为:
<LoadMore :disposeArr="listArr" :size="8">
<List slot-scope="scope" :arr="scope.sendArr" />
</LoadMore>
-
disposeArr
代表你要渲染的总数据(Array类型) -
size
代表你每次滚动要加载多少项(Number类型) -
sendArr
代表每次返回出来的新数组