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

Z时代
2024-01-10
分类：综合

vue

安装

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();
        }
      })
    },