做此项目与官网的区别在于,数据总数,页码总数是由后台返回,而非前端设置
<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', 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; 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)); }, }
|