熟练的mescroll

bug：页面拉不下来

.mescroll {
    position: fixed;
    top: 0; //若顶部有搜索框或tab切换，top值给顶部的高度：44px
    bottom: 0; //若底部有导航，则bottom值给底部高度：50px
    height: auto;
  }

禁止下拉刷新

 mounted() {
    this.mescroll.lockDownScroll(true);
  },

tab切换重新初始化

this.mescroll.resetUpScroll();

安装

npm install --save mescroll.js

//main.js引入
import MescrollVue from 'mescroll.js/mescroll.vue'
Vue.component('mescroll-vue', MescrollVue);

<template>
  <div class="detail">
    <navbar title="奖金明细"></navbar>
    <div class="box">
      **<mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit"> **
        <van-tabs v-model="active" @click="getTab" :sticky="true" :offset-top="44">
          <van-tab title="邀请奖">
            <div class="null" v-if="list.length==0">暂无邀请奖</div>
            <div class="flex minxi kuai" v-for="(item,i) in list" :key="i">
               <span>创建时间：{{item.createtime}}</span>
            </div>
          </van-tab>
          <van-tab title="邀请后续奖">
            <div class="null" v-if="list2.length==0">暂无邀请后续奖</div>
            <div class="item kuai" v-for="(item,i) in list2" :key="i">
              <div class="flex" style="color:black;font-size:13px;margin-bottom:2px;">
                <span>{{item.msg}}</span>
              </div>
            </div>
          </van-tab>
          <van-tab title="团队业绩奖">
            <div class="null" v-if="list1.length==0">暂无团队业绩奖</div>
            <div class="item kuai" v-for="(item,i) in list1" :key="i">
              <div class="flex">{{item.results_money}}</div>
            </div>
          </van-tab>
        </van-tabs>
      **</mescroll-vue>**
    </div>
  </div>
</template>
<script>
import navbar from "@/components/navbar";
//**import MescrollVue from "mescroll.js/mescroll.vue";**
export default {
  data() {
    return {
      active: 0, //类型 0邀请奖 1邀请后续奖 2团队业绩奖
      **list1: [], //个人业绩奖
      list2: [], //后续邀请奖
      list: [], //邀请奖
      mescrollUp: {
        callback: this.upCallback
      },
      mescroll: null**
    };
  },
  components: {
    navbar,
    //**MescrollVue**
  },
  methods: {
    **mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },**
    **upCallback(page, mescroll) {
      console.log(page);
      if (this.active == 0) {
        this.axios
          .post("/api/agent/agentDetail", {
            page: page.num
          })
          .then(data => {
            // 请求的列表数据
            let arr = data;
            // 如果是第一页需手动置空列表
            if (page.num === 1) {
              this.list = [];
            }
            // 把请求到的数据添加到列表
            this.list = this.list.concat(arr);
            // 数据渲染成功后,隐藏下拉刷新的状态
            this.$nextTick(() => {
              mescroll.endSuccess(arr.length, true);
            });
          })
          .catch(e => {
            // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
            mescroll.endErr();
          });
      } else if (this.active == 1) {
        this.axios
          .post("/api/agent/inviteMoney", {
            page: page.num
          })
          .then(data => {
            // 请求的列表数据
            let arr = data;
            // 如果是第一页需手动置空列表
            if (page.num === 1) {
              this.list2 = [];
            }
            // 把请求到的数据添加到列表
            this.list2 = this.list2.concat(arr);
            // 数据渲染成功后,隐藏下拉刷新的状态
            this.$nextTick(() => {
              mescroll.endSuccess(arr.length, true);
            });
          })
          .catch(e => {
            // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
            mescroll.endErr();
          });
      } else if (this.active == 2) {
        this.axios
          .post("/api/agent/agentResults", {
            page: page.num
          })
          .then(data => {
            // 请求的列表数据
            let arr = data;
            // 如果是第一页需手动置空列表
            if (page.num === 1) {
              this.list1 = [];
            }
            // 把请求到的数据添加到列表
            this.list1 = this.list1.concat(arr);
            // 数据渲染成功后,隐藏下拉刷新的状态
            this.$nextTick(() => {
              mescroll.endSuccess(arr.length, true);
            });
          })
          .catch(e => {
            // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
            mescroll.endErr();
          });
      }
    },**
    // tab切换
    getTab(name) {
      **this.mescroll.resetUpScroll();**
    }
  },
  mounted() {
    this.active = this.$route.query.tab;
  }
};
</script>
<style lang="less" scoped>
.detail {
  **.mescroll {
    position: fixed;
    top: 44px;
    bottom: 0;
    height: auto;
  }**
}
</style>

经典案例

//1、对于同一个页面不同的列表，可以使用两个<mescroll-vue>各自包裹列表，样式采用行内样式，使用同一个init和callback函数
	<mescroll-vue
        ref="mescroll"
        style="position: fixed;
                bottom: 50px;
                height: auto;"
        :up="mescrollUp"
        @init="mescrollInit"
      >
//2、对于列表上方有其他内容，会造成不同机型定位不同，所以top值动态获取
//3、页面结构，列表上方一个盒子box，列表一个盒子
  mounted() {
    let height = document.getElementById("box").offsetHeight;
    document.querySelector(".mescroll").style.top = height + "px";
  },
//4、点击tab切换时，重新获取盒子的高度，但是得等到页面渲染后再获取
  import Vue from "vue";
  tab(tab) {
      this.tab = tab;
      Vue.nextTick(function() {
        // DOM 更新了
        let height = document.getElementById("box").offsetHeight;
        document.querySelector(".mescroll").style.top = height + "px";
      });
      this.mescroll.resetUpScroll();
    },
    
//获取盒子宽高
var width = document.getElementById("box2").offsetWidth;//宽度
var height = document.getElementById("box2").offsetHeight;/

补充问题

let height = document.getElementById("box").offsetHeight;
//获取元素高度的时候，假如盒子不是定高的话，应该在接口调取成功并且页面渲染完成时获取高度
//页面渲染完,
	this.$nextTick(function() {
        // DOM 更新了
        let height = document.getElementById("box").offsetHeight;
        document.querySelector(".mescroll").style.top = height + "px";
      });