vue mint-ui 框架下拉刷新上拉加載組件的使用

安裝

npm i mint-ui -S

然后在main.js中引入

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

下拉刷新上拉加載更多數據

<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
        <ul class="track-list">
          <li class="track-item" v-for="(item,index) in list" :key="index">
            哎哎哎
          </li>
        </ul>
      </mt-loadmore>

• top-method綁定的是下拉刷新觸發的方法
• bottom-method是上拉加載觸發的方法
• bottom-all-loaded綁定的是否已加載完全部數據 ，默認為false，如果全部加載完數據之后，將allLoaded設置為true，這樣就不會再去觸發上拉加載的方法了

this.allLoaded = true;

全部代碼

<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
        <ul class="track-list" v-if="list.length!==0">
          <li class="track-item" v-for="(item,index) in list" :key="index">
            <div class="location"><span class="iconfont icon-location"></span>{{item.address}}附近</div>
            <div class="time"><span class="iconfont icon-time"></span>{{item.dateCreated}}</div>
          </li>
        </ul>
        <div class="no-data" v-else>暫無孩子軌跡位置信息</div>
      </mt-loadmore>



// 下拉刷新
    loadTop(){
      this.curPage = 1
      this.getChildLocationList()
    },
    // 加載更多數據
    loadBottom(){
      this.curPage +=1
      this.getChildLocationList()
    },


    getChildLocationList(){
      this.allLoaded = false
      let dateCreated = this.dateCreated
      this.$api.childLocationList({
        params:{
          id:this.uid,
          cid:this.curChildId,
          dateCreated:dateCreated,
          isPager:1,//0-不分頁，1-分頁；
          pageNum:this.curPage,//第幾頁
          pageSize:this.pageSize//每頁顯示數據條數
        }
      }).then(res=>{
        if(res.code==2000){
          if(res.row){
            let _list = res.row.list
            this.curPage = res.row.pageNum
            this.pageSize = res.row.pageSize
            let totalPages = res.row.pages//總頁數
            // 下拉刷新 加載更多
            setTimeout(() => {
              this.$refs.loadmore.onTopLoaded();
              this.$refs.loadmore.onBottomLoaded();
            }, 1000);
            if(this.curPage==1){
              this.list = _list;
            }else{
              if(this.curPage==totalPages){
                this.allLoaded = true;// 若數據已全部獲取完畢
              }
              this.list = this.list.concat(_list);//數組追加
            }
          }else{
            this.$refs.loadmore.onTopLoaded();
            this.allLoaded = true;// 若數據已全部獲取完畢
            this.list = []
          }
        }else{
          this.$refs.loadmore.onTopLoaded();
        }
      })
    },