列表下拉加载组件,npm下载vue-infinite-scroll插件引入,直接按需引入element的InfiniteScroll不起作用
1.mainjs引入vue-infinite-scroll组件
import vueiInfinite from 'vue-infinite-scroll';
Vue.use(vueiInfinite);
2. html,scroll-wrap盒子设置高度、滚动(height:xxxpx,overflow:auto)
<div class="list">
<div class="scroll-wrap" v-infinite-scroll="getLoadData" infinite-scroll-
disabled="stop" infinite-scroll-immediate="false" infinite-scroll-distance='1'>
<div v-for="(item,index) in list" :class="[index===activeKey?'active':'','item']"
:key="index" @click="handleClick(item,index)">
{{item.name}}
</div>
<p class="explain" v-if="loading">加载中...</p>
<p class="explain" v-if="noMore&&list.length">没有更多了</p>
<p class="empty" v-if="!list.length&&noMore&&!loading">暂无数据</p>
</div>
</div>
3.data数据据设置
data() {
return {
list: [],
loading: false, //数据请求中,暂时停止请求
pageNum: 1,
pageSize: 5,
noMore: false, //没有更多数据
}
}
computed: {
stop() { //暂停请求
return this.loading || this.noMore;
},
},
4. 请求
getLoadData() {
this.loading=true
const params = {
...this.requestParams,
pageNum: this.pageNum,
pageSize: this.pageSize,
};
getVideo(params).then(res => {
const data = res?.data
const content =data?.dataList || [];
if (data?.totalPage <= this.pageSize) {
this.noMore = true;
return
} else {
this.pageNum++;
this.noMore = false;
}
if (content.length > 0) {
this.list = [...this.list, ...this.handleDateFormat(content)];
}
})
.catch(()=>{
this.noMore=true
})
.finally(() => {
this.loading = false;
});
},