list-load-more-lxx

瀑布流插件

如果后端返回的渲染数据冗杂,那么可以在产品组件外层套用这个LoadMore组件

作者: MrL

一. 安装

npm i list-load-more-lxx -S

或

yarn add list-load-more-lxx

二. vue项目入口文件调用

在vue项目的入口文件中调用 main.js

import LoadMore from list-load-more-lxx

Vue.use(LoadMore)

三. 组件中使用

找到产品列表组建的外层,如果是这样的写法:

<List :records="allarr" />

那么可以改写为:

<LoadMore :bigarr="allarr" :size="8">
   <List slot-scope="scope" :records="scope.smallarr" />
</LoadMore>

四. 参数解释

• bigarr代表原数组(大数组)
• smallarr代表处理分发之后的数组(小数组)
• size代表滚动时显示多少项
• records是组件传值的名字(如不一样,记得同步)

使用说明: 将:bigarr="换成需要传入的数组",:size="需要显示的个数"