1、安装
npm install vue-infinite-scroll --save
2、使用main.js
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll);
3、使用
<ul>
<li v-for="(item, index) in list"
:key="index">
<div>{{item}}-要加载的数据</div>
</li>
</ul>
<div v-infinite-scroll="loadMore"
infinite-scroll-disabled="busy"
infinite-scroll-distance="20">
<p v-if="showLoading">加载中...</p>
<p v-else>数据加载完成</p>
</div>
data () {
return {
list: [],
params: {
page: 1,
rows: 5
},
busy: true,
showLoading: true
}
},
loadMore加载事件,当鼠标滚动到一定距离会加载这个事件。
busy:判断是否加载loadMore,true表示禁止加载,false表示启用
methods: {
// 根据传入的flag判断是加载更多还是初次加载
getList (flag) {
axios.get(`/list?page=${this.params.page}&rows=${this.params.rows}`).then(result => {
console.log(result);
var res = result.data;
if (res.status == 1) { // 请求成功
if (flag) { // 加载更多
this.goodsList = this.goodsList.concat(res.result.list);
// 如果返回的条数为0,表示已加载完,设置busy为true禁止加载
if (res.result.count == 0) {
this.busy = true;
this.showLoading = false;
} else {
this.busy = false;
}
} else { // 初次加载
this.goodsList = res.result.list;
// 初次加载完成后启用busy
this.busy = false;
}
} else {
this.goodsList = [];
}
})
},
loadMore () {
// 在加载之前设置busy为true禁止加载,当前加载完成后再启用
this.busy = true;
setTimeout(() => {
this.params.page++;
this.getList(true);
}, 1000)
}
}