目录
2种方式,一种是点击按钮请求下一页,另一种是滚动到底部的时候请求下一页。
引入骨架屏优化加载过程中的体验。
loading为true时表示加载中,finished为true时表示当前是最后一页。
<div v-for="item in articleList" :key="item.aid">{{item}}</div>
<van-skeleton class="loading_tip" title :row="2" :loading="loading"></van-skeleton>
<div v-show="finished" class="finished_tip fix_btn">
- 已全部加载 -
</div>
点击方式
<div v-show="!finished && !loading" @click="getDetail" class="bottom_fix_show_more_btn fix_btn">
查看更多
</div>
getDetail() {
this.loading = true;
this.getShareSubjectDetail({
params: this.params,
cb: (res) => {
this.loading = false;
if(res.return_code === '200') {
Object.keys(this.data).forEach(key => {
this.data[key] = res.return_data.topic_data[key]
})
this.articleList = [...this.articleList, ...res.return_data.topic_data.artlist]
let lastPage = Math.ceil(Number(res.return_data.topic_data.articlenum) / 5) ///向上取整
if(this.articleList.length == 0 || this.params.page == lastPage) {
this.finished = true;
this.loading = false
}
else {
this.params.page++
}
document.title = this.data['title']
}
}
})
},
滚动方式
getDetail() {
this.getShareSubjectDetail({
params: this.params,
cb: (res) => {
if(res.return_code === '200') {
Object.keys(this.data).forEach(key => {
this.data[key] = res.return_data.topic_data[key]
})
this.articleList = [...this.articleList, ...res.return_data.topic_data.artlist]
if(res.return_data.topic_data.artlist.length == 0) {
this.finished = true;
this.loading = false;
window.removeEventListener('scroll', this.scrollToGet)
}
}
}
})
},
scrollToGet () { ///滚动监听
var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight,document.body.clientHeight);
if (clientHeight + scrollTop >= scrollHeight) {
this.params.page++;
this.getDetail();
} else {
this.loading = true
}
},
mounted() {
this.getDetail();
window.addEventListener('scroll', this.scrollToGet)
},