vue使用mintUI,滑動到底部自動加載(infinte-scroll)

做此項目與官網的區別在於,數據總數,頁碼總數是由後臺返回,而非前端設置

<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));
    },
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章