#js-loadmore 下滑加载更多组件
1.1 使用
1.1.1 commonJs规范
1 安装 npm install js-loadmore
2 引用 import Loadmore from 'js-loadmore'
3 使用
Loadmore.setOptions({
pageCount,
ajaxFN: (currentPage) => {}
})
Loadmore.toLoadFn()
1.1.2 引用 dist下js
1.2 参数
名称 | 类型 | 描述 | 必选 | 默认值 |
---|---|---|---|---|
pageCount | Number | 总页数 | Y | '' |
ajaxFN | Function | 加载时的调取接口,获取数据 | Y | '' |
lock | Booleans | 滚动的开关,防止连续加载 | N | true |
throttleTime | Number | 函数节流时间 | N | 30 |
toLoadHeight | Number | 离底部滚动点距离 | N | 150 |
page | Number | 当前页 | N | 1 |
page | Number | 当前页 | N | 1 |
toLoadNum | Number | 满足条件可加载数 | N | 20 |
lockTime | Number | 加载后多少秒打开开关让页面可继续加载- | N | 0 |
rectHeightDom | Dom | 要滚动区域,默认body | N | document.body |
appendHTMLNode | Dom | 页面中加入 加载中,没有更多的dom | N | document.body |
offsetHeight | Dom | 可见区域高度 | N | document.documentElement.offsetHeight || 0 |
loadText | String | 加载文案 | N | '加载中' |
noMoreText | String | 没有更多文案 | N | '没有更多内容' |
1.3 示例
<!-- vue下 需要在 this.$nextTick下使用,其他可正常使用 -->
this.$nextTick(function(){
let loadParams = {
pageCount,
ajaxFN: (currentPage) => {
<!-- 需要执行的回调 -->
var params = {
currentPage
}
this.$store.dispatch('init', params)
},
lockTime: 30,
}
Loadmore.setOptions(loadParams)
Loadmore.toLoadFn()
})
```