vue移动端上拉加载

vue移动端上拉加载

mint-UI 插件，HTML定义加载的内容

<mt-loadmore
  :bottom-method="loadBottom"
  :auto-fill="false"
  :bottomPullText="bottomText"
  ref="loadmore"
  @bottom-status-change="handleBottomChange">
  <div>
    <ul class="clearfix picBox" id="content">
      <li class=" boxContent" v-for="item in list" :key="item.id">
       <!--Content-->
      </li>
    </ul>
    <div v-show="bottomStatus == 'pull'"
     style="width:100%;text-align:center;margin-top:15px;margin-bottom:20px;z-index:99;">
      {{text}}
     </div>
  </div>
</mt-loadmore>

在JavaScript中定义data和方法

export default {
  data(){
    return {
      bottomText: "",
      text:'',
      bottomStatus: "",
      pageNo:1,
      totalPageCount:2,
      list:[],
      allLoaded:false
    }
  },
  methods: {
  	//重新加载时需调用的方法，此处不能使用getList代替
    anew(){
      //清空数据的同时将“页数”置为 1，清空数据不能放在getList里面
      this.list = []
      this.pageNo = 1
      this.getList()
    },
    //获取列表
    getList() {
    	//加载框
      Indicator.open({
        text: "加载中...",
        spinnerType: "snake"
      });
      //传递的参数，此处设置一页显示10条
      let shop={
        title:'',
        typecode:'',
        insuranceCode:''
      }
      let pageModel={
        pageNo:this.pageNo,
        pageSize:10
      }
      // 引用的接口函数
      classList({shop,pageModel}).then(res=>{
        console.log(res)
        //获取数据
        let rows = res.data.data.rows
        //此处total是后台返回的数据总条数
        let tatal = res.data.data.total
        //每页10条数据，获取总页数
        let total_pages = Math.ceil(tatal/10) 
        //如果总页数大于当前所在页可以加载，设置底部提示语
        if( total_pages>this.pageNo){
          this.text = "上拉加载更多...";
        }else{
        //此处设置只能加载两页
           if (this.pageNo > 1) {
              Indicator.close()
              this.text = "— 我也是有底线的 —";
            }
        }
        //将每一条数据循环遍历进list
        if(rows.length != 0){
          for( let i=0;i<rows.length;i++){
            this.list.push(rows[i])
          }
          Indicator.close()
        }else{
          this.text = "— 我也是有底线的 —";
        }
      })
    },
    loadBottom() {
      // 下拉刷新时进行页数判断
      if (this.pageNo >= this.totalPageCount) {
        console.log('加载完成')
        this.allLoaded = true;
        this.text = '— 我也是有底线的 —'
        // 固定方法,加载完要调用一次,用于重新定位 
        this.$refs.loadmore.onBottomLoaded();
      } else {
        this.pageNo += 1;
        console.log('未加载完，继续加载')
      }
      // 判断是否完全加载完
      if (!this.allLoaded) {
        //若没有加载完
        setTimeout(() => {
          this.getList();
          this.$refs.loadmore.onBottomLoaded();
        }, 1000);
      }else{
        //加载完成
      }
    },
 }