vue mescroll使用上拉加载、下拉刷新

一个页面多次调用mescroll

注：this.navData[1].mescroll.resetUpScroll(); // 点击筛选重置方法

<template>
  <div class="healthy-bean-record-c">
    <div class="top">
      [外链图片转存失败(img-pPYyrr3K-1562119870434)(https://mp.csdn.net/assets/images/mine/tixianjilu.png)]
    </div>
    <div class="navLine">
      <!-- <van-tabs v-model="active" swipeable animated> -->
      <van-tabs v-model="active" swipeable>
        <van-tab :title="navData[0].tit">

          //参数名和初始化方法名需进行区分
          <mescroll-vue ref="mescroll0" :up="mescrollUp0" @init="mescrollInit0">
            <div class="item" v-for="(item,index) in navData[0].dataList">
              <span class="s1">{{item.desc}}</span>
              <span class="s2">{{item.addtime}}</span>
              <span class="s3" v-if="item.status==1">+{{item.num}}健康豆</span>
              <span class="s3" v-else-if="item.status==2">-{{item.num}}健康豆</span>
            </div>
          </mescroll-vue>
        </van-tab>
        <van-tab :title="navData[1].tit">

          //参数名和初始化方法名需进行区分
          <mescroll-vue ref="mescroll1" :up="mescrollUp1" @init="mescrollInit1">
            <div class="item" v-for="(item,index) in navData[1].dataList">
              <span class="s1">{{item.desc}}</span>
              <span class="s2">{{item.addtime}}</span>
              <span class="s3">+{{item.num}}健康豆</span>
            </div>
          </mescroll-vue>
        </van-tab>
        <van-tab :title="navData[2].tit">

          //参数名和初始化方法名需进行区分
          <mescroll-vue ref="mescroll2" :up="mescrollUp2" @init="mescrollInit2">
            <div class="item" v-for="(item,index) in navData[2].dataList">
              <span class="s1">{{item.desc}}</span>
              <span class="s2">{{item.addtime}}</span>
              <span class="s3">-{{item.num}}健康豆</span>
            </div>
          </mescroll-vue>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import MescrollVue from "mescroll.js/mescroll.vue";
import axios from "axios";
export default {
  data: function () {
    return {
      // 三个配置项
      mescrollUp0: {
        callback: this.upCallback,
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10 //每页数据条数,默认10
        },
        htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据), 显示无更多数据会不好看这就是为什么无更多数据有时候不显示的原因
        toTop: {
          //回到顶部按钮
          src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
          offset: 1000 //列表滚动1000px才显示回到顶部按钮
        },
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
          icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
          tip: "暂无相关数据~" //提示
        }
      },
      mescrollUp1: {
        callback: this.upCallback
      },
      mescrollUp2: {
        callback: this.upCallback
      },
      // 使用数组接收三个列表
      navData: [
        {
          tit: "全部",
          mescroll: null,
          dataList: []
        },
        {
          tit: "收入",
          mescroll: null,
          dataList: []
        },
        {
          tit: "支出",
          mescroll: null,
          dataList: []
        }
      ]
    };
  },
  components: { MescrollVue },
  methods: {
    // 三个初始化方法
    mescrollInit0(mescroll) {
      this.navData[0].mescroll = mescroll;
    },
    mescrollInit1(mescroll) {
      this.navData[1].mescroll = mescroll;
    },
    mescrollInit2(mescroll) {
      this.navData[2].mescroll = mescroll;
    },
    // 一个公用的回调函数，使用if判断是哪个
    upCallback(page, mescroll) {
      console.log(page);
      console.log(this.active);
      if (this.active === 0) {
        //全部
        this.$http("/cml/api/newuser/jiankang", {
          /*pageNum: page.num,
          pageSize: this.pageSize,*/
          status: -1
        })
          .then(res => {
            let arr = res.data;
            if (page.num === 1) {
              this.navData[0].dataList = [];
            }
            this.navData[0].dataList = this.navData[0].dataList.concat(arr);
            this.$nextTick(() => {
              mescroll.endSuccess(arr.length, false);
            });
          })
          .catch(err => {
            mescroll.endErr();
          });
      } else if (this.active === 1) {
        // 收入
        this.$http("/cml/api/newuser/jiankang", {
          /*pageNum: page.num,
          pageSize: this.pageSize,*/
          status: 1
        })
          .then(res => {
            let arr = res.data;
            if (page.num === 1) {
              this.navData[1].dataList = [];
            }
            this.navData[1].dataList = this.navData[1].dataList.concat(arr);
            this.$nextTick(() => {
              mescroll.endSuccess(arr.length, false);
            });
          })
          .catch(err => {
            mescroll.endErr();
          });
      } else {
        // 支出
        this.$http("/cml/api/newuser/jiankang", {
          /*pageNum: page.num,
          pageSize: this.pageSize,*/
          status: 2
        })
          .then(res => {
            let arr = res.data;
            if (page.num === 1) {
              this.navData[2].dataList = [];
            }
            this.navData[2].dataList = this.navData[2].dataList.concat(arr);
            this.$nextTick(() => {
              mescroll.endSuccess(arr.length, false);
            });
          })
          .catch(err => {
            mescroll.endErr();
          });
      }
    }
  }
};
</script>
<style lang="less" scoped>
/*固定高度*/
.mescroll {
  position: fixed;
  top: 6.07rem;
  bottom: 0;
  height: auto;
  /*如设置bottom:50px,则需height:auto才能生效*/
}

.van-tabs--line {
  padding-top: 1.32rem;
}

/deep/.van-tabs--line .van-tabs__wrap {
  height: 1.32rem;
}

.healthy-bean-record-c {
  &:before {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: white;
  }

  .top {
    width: 100%;
    height: 3.4rem;
    text-align: center;
    border-bottom: 0.05rem solid #d9d9d9;

    .img {
      width: 2.26rem;
      padding-top: 0.6rem;
    }
  }

  .item {
    margin: 0.8rem 0.74rem;
    display: flex;
    justify-content: space-between;

    .s1 {
      width: 30%;
      font-size: 0.34rem;
      color: #232323;
    }

    .s2 {
      width: 45%;
      font-size: 0.32rem;
      color: #232323;
      text-align: center;
    }

    .s3 {
      width: 25%;
      font-size: 0.31rem;
      color: #ac415d;
      text-align: right;
    }
  }
}
</style>

注意点:

noMoreSize 

默认值为:5,

如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据), 显示无更多数据会不好看这就是为什么无更多数据有时候不显示的原因

mescroll官网:mescroll -- 精致的下拉刷新和上拉加载js框架