1.0.1 • Published 3 years ago

load-more-qsy v1.0.1

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

瀑布流插件

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

作者:@-qsy

一、安装

node i load-more-qsy -S

yarn add load-more-qsy 

二、vue项目入口文件的

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

import LoadMore from 'load-more-qsy'

Vue.use(LoadMore)

三、组件中使用

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

<Products :arr="goodsArr" />

现在可以改写为:

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

四、参数注释

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

重点:调用者只需对bigarrsize属性传入对应的参数即可。