做此項目與官網的區別在於,數據總數,頁碼總數是由後臺返回,而非前端設置
<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
<li v-for="(item,index) in records" :key="index">
<span class="nickname">{{item.nickName}}</span>
<span class="date">{{item.createTime}}</span>
</li>
</ul>
res返回的數據格式如下
res:{
data:{
pages:2,
tota;:35,
records:[{
nickname:'Tony',
createTIme:'1568738766'
},
{
nickname:'James',
createTIme:'1536746827'
}],
}
}
data() {
return {
paramId:'2e78542asd812e1', // 數據在數據庫中存放的ID
current: 0, // 查詢評論的頁碼數
pages: "", //總評論頁碼數
loading:false
};
},
methods:{
loadMore(){
this.listForCom();
},
listForCom() {
// 獲取評論列表
let self = this;
// 發請求所需要的參數
var commentParams = { current: this.current, sectionId: this.paramId };
// 請求的配置
var commentOptions = {
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
data: qs.stringify(commentParams),
url: "/share/comment/list"
};
// 發送請求
this.$axios(commentOptions)
.then(res => {
if (res.data) {
self.pages = res.data.pages;//將從後臺獲取的頁碼總數存入data中
if (res.data.records) {
// 將每一次獲取到的數據拼接在已有的數據後面
self.records = self.records.concat(res.data.records);
}
++this.current; // 遞增頁碼
// 當獲取到的數據量等於總的數據量時,禁用加載
if(self.records.length == res.data.total){
self.loading = true;
}
}
})
.catch(err => console.log(err));
},
}