用无限滚动vue-infinite-scroll实现分页加载
程序员文章站
2022-03-29 08:13:54
...
npm安装
npm install vue-infinite-scroll --save
main.js引入
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
使用
逻辑:页面每次接收10条数据,当距离底部10px时触发回调函数,接收下一页的数据
<ul
class="infinite-list"
v-infinite-scroll="tx_load"
infinite-scroll-disabled="disabled_x"
infinite-scroll-distance="10"
style="overflow:auto;padding: 5px;"
>
<li v-for="(item, index) in bjtx_list" class="tx-list-item">
<div class="item_tx">
<div class="tx_touxiang">
<img v-if="item.Avatar" :src = "ImgUrl + item.Avatar" alt="">
<img v-else src = "http://192.168.1.120:8095/static/img/defultAvatar.08d3261.png" alt="" />
</div>
<span>{{ item.Name }}</span>
</div>
</li>
</ul>
data(){
return{
bjtx_page: 1,
bjtx_rows: 10,
bjtx_list: [], // 班级同学列表
bjtx_count: "", // 班级总共多少同学
disabled_x: false, // 表示是否执行同学回调函数触底事件
}
}
methods:{
// ----------------------------同学触底事件----------------
tx_load() {
this.disabled_x = true
if (this.bjtx_count) {
if (this.bjtx_count > this.bjtx_list.length) {
this.bjtx_page = this.bjtx_page + 1;
let params = {
clsid: this.res.clsid,
page: this.bjtx_page,
rows: this.bjtx_rows
};
this.$api.classInfo.GetStudentList(params).then(res => {
// console.log(res);
if (res.status == 0) {
// console.log(res);
this.bjtx_list = this.bjtx_list.concat(res.List);
this.bjtx_count = res.count;
} else {
// this.$message({
// showClose: false,
// message: res.msg,
// type: "error",
// duration: 1500
// });
}
});
} else {
// this.$message({
// showClose: false,
// // message: "已经到底了",
// type: "warning",
// duration: 1500
// });
}
} else {
// console.log("123456");
}
this.disabled_x = false
}
}
效果图展示:类似于这种样式,由于上述代码列表数据不足,故演示另一部分的样式
配置参数记录
v-infinite-scroll=“loadMore” :表示会触发回调函数tx_load
infinite-scroll-distance=“10”:表示距离底部10px时会触发该事件
infinite-scroll-disabled=“busy”:表示由变量busy决定是否执行loadMore,false则执行loadMore,true则不执行,注意,busy表示繁忙,繁忙的时候是不执行的。
infinite-scroll-immediate-check: 默认值为true,该指令表示,应该在绑定后立即检查busy的值和是否滚动到底。假如你的初始内容高度不够,不足以填满可滚动的容器的话,你应设为true,这样会立即执行一次loadMore,会帮你填充一些初始内容。
infinite-scroll-listen-for-event: 当事件在Vue实例中发出时,无限滚动将再次检查。
infinite-scroll-throttle-delay: 检查busy的值的时间间隔,默认值是200,因为vue-infinite-scroll的基础原理是,vue-infinite-scroll会循环检查busy的值,以及是否滚动到底,只有当:busy为false且滚动到底,回调函数才会执行
上一篇: Vue 无限滚动(分页加载)
下一篇: 初识vue 学习分享