![](https://img-blog.csdnimg.cn/img_convert/f479056b5dc47417ef01628c0dbb083d.png)
<div v-infinite-scroll="load" infinite-scroll-disabled="disabled" style="overflow:auto" >
<div class="newlist" v-for="(item, index) in tableData" v-show="item.newclass===items.label" :key="index">
<div class="newleft" @click="toNewcontent(item)">
<div class="top-demo">
{{item.newtitle }}
</div>
<div class="bottom-demo">
<div> {{item.newauthor }}</div>
<div>{{item.comment||0}}评论</div>
<div>{{item.createtime | filtertime}}</div>
</div>
</div>
<div class="newright" @click="toNewcontent(item)">
<img
:src="item.newimg"
:alt="item.newimg"
/>
</div>
</div>
<!-- oashao -->
<p v-if="loading" style="margin-top:10px;" class="loading">
<span style="font-size:13px;color:#ccc">加载中.......</span>
</p>
<p v-if="noMore" style="margin-top:10px;font-size:13px;color:#ccc">没有更多了</p>
</div>
data() {
return {
loading: false,
pageNum: 1,
pageSize: 5,
totalPages: "",//取后端返回数据的总页数
tableData: [],
};
},
created() {
this.getNewsList();
},
computed: {
noMore() {
//当起始页数大于总页数时停止加载
return this.pageNum >= this.totalPages - 1;
},
disabled() {
return this.loading || this.noMore;
}
},
methods
load() {
//滑到底部时进行加载
this.loading = true;
setTimeout(() => {
this.pageNum += 1; //页数+1
console.log('as')
this.getNewsList(); //调用接口,此时页数+1,查询下一页数据
}, 1000);
},
getNewsList() {
this.request({
url: '/news/page',
method: 'get',
params:{
newclass:this.activeName,
pageNum: this.pageNum,
pageSize: this.pageSize,
isrelease: 1,
}
}).then((res) => {
console.log(res)
this.tableData = this.tableData.concat(res.records);
this.totalPages=res.size
this.loading = false;
});
},