This is a vue-loadmore tool
npm install lh-loadmore
sh
yarn add lh-loadmore --save (推荐)
cnpm i lh-loadmore --save
npm i lh-loadmore --save
`
Usage
全局引用
`sh
main.js
import LhLoadMore from 'lh-loadmore'
Vue.use(LhLoadMore)
`
组件使用
1. 一般使用方法 Tips
`sh
:loadlist="newsList"
:loadmoregif="loadMoreImg"
:loadmoretxt="loadMoreTxt"
:setscrollbtm="setScrollBtm"
:listlength="listLength"
:pagestar="pageStar"
:pagelist="pageList"
@nextpage="nextPage"
@pagenone="pageNone"
/>
`
2. 参数
参数 | 说明 | 类型
:- | :- | :- |
loadlist | 数据展示列表 | Array
loadmoregif | 加载动画的gif & 数据加载完的图标 | String
loadmoretxt | 加载动画内容 | String
setscrollbtm | 设置触底距离 | Number
pagestar | 设置开始页码 | Number
pagelist | 设置每页加载条数 | Number
3. 事件
事件名称 | 说明 | 设置数据
:- | :- | :- |
created | 父组件生命周期初始化数据 | 数据总条数 & 初始化数据数组 & 变更后的页码开始值
nextpage | 加载下一页数据 | 向子组件传递新一页数据 & 传递页码开始值(子组件判断是否数据加载完)
pageNone | 数据已加载完 | 向子组件传递加载结束图标 & 传递加载结束文字
注意
* css采用stylus进行开发,如果您没有安装对应依赖,我们在您安装我们插件的时候,自动帮您安装对应stylus依赖。
* 必须在created 函数中初始化您需要渲染的数据,这涉及到父子组件的生命周期执行顺序关系。
* 您的对应加载动画gif及结束动画图片,请在父组件使用require 动态引入。
* 关于插件布局,我们使用适合我们自己的布局渲染,如果不适合您,请修改node_modules相关代码包`。