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

//bug：如果一个页面多个，必须使用v-show控制显示隐藏

1、安装包

注：position: fixed; // 必须使用固定定位

.mescroll {
  position: fixed;
  top: 120px;
  bottom: 0;
  height: auto;
}

npm install --save mescroll.js

2、引入mescroll的vue组件

import MescrollVue from 'mescroll.js/mescroll.vue'

3、注册为组件

			components: {
			    MescrollVue // 注册mescroll组件
			  },

4、加标签

			<template>
			  <div>
			    <!--mescroll滚动区域的基本结构-->
			    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
			      <!--内容...-->
			    </mescroll-vue>
			  </div>
			</template>

5、data中配置

		 data () {
			    return {
				      mescroll: null, // mescroll实例对象
				      dataList: [] , // 请求到的列表数据
				      dataList: {}, //商品上拉加载不同筛选条件传入的参数（参数一致不需要）
				      mescrollDown:{}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
				      mescrollUp: { // 上拉加载的配置.
					        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
							

							> 以下配置均可省略

					        //以下是一些常用的配置,当然不写也可以的.
							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: "暂无相关数据~" //提示
							}
			     	 },
			     	
				}
	 },

6、定义初始化方法及回调方法

		methods: {
			    // mescroll组件初始化的回调,可获取到mescroll对象
			    mescrollInit (mescroll) {
			    	  this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
			    },
			    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
			    upCallback (page, mescroll) {
			      // 联网请求
			      axios.get('xxxxxx', {
			        params: {
			        // 公共参数
			          num: page.num, // 页码
			          size: page.size // 每页长度
			         // 对于筛选条件，传递不同的参数，以下定义参数  
			         a:this.dataList.a,
			         b:this.dataList.b,
			        }
			      }).then((response) => {
				        // 请求的列表数据
				        let arr = response.data
				        // 如果是第一页需手动置空列表
				        if (page.num === 1){
				         		this.dataList = []
				        }
				        // 把请求到的数据添加到列表
				        this.dataList = this.dataList.concat(arr)
				        // 数据渲染成功后,隐藏下拉刷新的状态
				        this.$nextTick(() => {
				          mescroll.endSuccess(arr.length,true)  //当前页条数 ，是否有下页
				         // mescroll.endByPage(dataSize, totalPage);   //总页数
				         // mescroll.endBySize(dataSize, totalSize);  //总条数
				        })
			      }).catch((e) => {
			        // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
			        mescroll.endErr()
			      })
			    }
			  }
			}

7、点击不同筛选条件时，重置并拼接dataList，并更新上拉加载

// 店铺筛选点击事件 //storeSelect 店铺筛选  综合1 销量2 信用3 
    storeSelected(id) {
	      this.storeSelect = id;
	      this.dataList2 = {};  //重置参数
	      if (id == 1) {
	       		 this.mescroll.resetUpScroll();
	      } else if (id == 2) {
		        this.dataList = {
		          store_sales: 1
		        };
		        this.mescroll.resetUpScroll();
	      } else if (id == 3) {
		        this.dataList = {
		          store_credit: 1
		        };
		        this.mescroll.resetUpScroll();
		      }
		 }
  }

一个页面多次调用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";
import qs from "qs";
export default {
  data: function() {
    return {
      // 三个配置项
      mescrollUp0: {
        callback: this.upCallback
      },
      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>