vue项目中引用 下拉加载 v-infinite-scroll懒惰加载
- 安装
npm i vue-infinite-scroll -D
- vue项目中引用 在main.js入口文件里面引入
import infiniteScroll from ‘vue-infinite-scroll’
Vue.use(infiniteScroll)
- 使用 在滚动条所在元素最后方添加
<div
v-infinite-scroll="loadMore"
infinite-scroll-disabled="busy"
infinite-scroll-distance="10">
可以为加载中提示语或加载中图片
</div>
例:
<div class="scroll">
<div class="content">
......
</div>
<div
v-infinite-scroll="loadMore"
infinite-scroll-disabled="disabled"
infinite-scroll-distance="10">
可以为加载中提示语或加载中图片
</div>
<p v-if="loading" class="loading"><span></span></p>
<p v-if="noMore" class="noMore">已加载全部匹配的结果</p>
</div>
export defalut({
data() {
return {
count: 1, // 起始页数值为0
loading: false,
page: 1
}
},
computed: {
noMore () {
// 当起始页数大于总页数时停止加载
return this.count >= this.totalPages
},
disabled () {
return this.loading || this.noMore
}
},
methods: {
loadMore() {
setTimeout(() => {
this.loading = true
this.count += 1 // 页数+1
const params = { enterpriseName: this.state, current: this.count, size: 10 }
this.common(params) // 调用接口,此时页数+1,查询下一页数据
}, 2000)
}
common (params) {
getEnterpriseListByName(params).then(res => {
this.tableData = this.tableData.concat(res.records) // 因为每次后端返回的都是数组,所以这边把数组拼接到一起
this.totalPages = res.pages
this.total = res.total
this.loading = false
})
}
}
})
选项 | 描述 |
---|---|
infinite-scroll-disabled | 等于true时代表正在执行加载,这时禁用滚动触发。 |
infinite-scroll-distance | 指定滚动条距离底部多高时触发v-infinite-scroll指向的方法。 |
infinite-scroll-immediate-check | 布尔值(默认值= true)。指令在绑定后立即检查,是否内容高度不足以填充页面容器。 |
infinite-scroll-listen-for-event | 当vue实例触发事件时立即再次检查。 |
infinite-scroll-throttle-delay | 两次检查之间的时间间隔(默认值= 200)。 |