二次封装mescroll

<template>
  <mescroll-vue
    ref="mescroll"
    :down="mescrollDown"
    :up="mescrollUp"
    @init="mescrollInit"
  >
    <div id="mecroll_dataList">
      <slot></slot>
    </div>
  </mescroll-vue>
</template>

<script>
// 引入mescroll的vue组件
import MescrollVue from "mescroll.js/mescroll.vue";
export default {
  name: "mescrollComponent",
  components: {
    MescrollVue,
  },
  data() {
    return {
      mescroll: null,
      mescrollDown: {
        callback: this.downCallback,
      },
      mescrollUp: {
        htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', //上拉加载中的布局
        htmlNodata: '<p class="upwarp-nodata">更多精彩敬请期待</p>', //无数据的布局
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
        page: {
          num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10, // 每页数据的数量
        },
        noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        toTop: {
          src: "./static/mescroll/mescroll-totop.png", // 回到顶部按钮的图片路径,支持网络图
        },
        empty: {
          // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
          warpId: "mecroll_dataList", // 父布局的id;
          icon: "./static/mescroll/mescroll-empty.png", // 图标,支持网络图
          tip: "暂无相关数据~", // 提示
          btntext: "去逛逛 >", // 按钮,默认""
          btnClick() {
            // 点击按钮的回调,默认null
            alert("点击了按钮,具体逻辑自行实现");
          },
        },
        lazyLoad: {
          use: true, // 是否开启懒加载,默认false
        },
      },
    };
  },
  methods: {
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      // 上拉加载
      this.$emit("load", page, mescroll);
    },
    downCallback(mescroll) {
      this.$emit("downCallback", mescroll);
    },
  },
  beforeRouteEnter(to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
    next((vm) => {
      // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter(); // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
    });
  },
  beforeRouteLeave(to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
    // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave(); // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
    next();
  },
};
</script>

<style scoped>
</style>

<template>
  <div class="betterScrollBox">
      <div class="top">
          顶部
      </div>
        <div class="center">
        <Mescroll ref="myscroll" @downCallback="downCallback" @load="getList">
            <ul>
                <li v-for="item in dataList" :key="item">
                    {{item}}
                </li>
            </ul>
        </Mescroll>
        </div>
      <div class="bottom">
        底部区域
      </div>
  </div>
</template>

<script>
import Mescroll from './../components/mescroll'
export default {
    data () {
        return {
            dataList:[],
            pageNo:1,
            mescroll:null,
            total:0
        }
    },
    components:{
        Mescroll
    },
    computed:{
        searchParmas(){
            const {pageNo} = this
            return {
                pageNo,
                pageSize:10
            }
        }
    },
    mounted(){
       
    },
    methods:{
       getList(page,mescroll){
           this.pageNo = page.num
           if(!this.mescroll){
               this.mescroll = mescroll
           }
           setTimeout(()=>{
               const {pageNo} = this
               if(pageNo === 1){
                   this.dataList = []
               }
               let backList = []
               let lastData = this.dataList.length
               for (let index = lastData; index < lastData+10; index++) {
                   backList.push(index)
               }

               this.dataList = this.dataList.concat(backList)
               this.$nextTick(()=>{
                   // 判断是否还有下一页
                   this.mescroll.endSuccess(backList.length,this.dataList.length < 13)
                // 如果是第一页，并且请求到的数据为空，那么会显示空布局
               })

           },1000)
       },
       downCallback(mescroll){
           this.pageNo = 1
           mescroll.resetUpScroll()
       },
       changeTab(){
           // 如果有切换状态的操作，
           this.pageNo = 1
           this.dataList = []
           this.mescroll.resetUpScroll()
       }

    }
}
</script>

<style scoped>
ul li{
padding: 20px 0;
text-align: center;
}
.betterScrollBox .top{
    height: 44px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    line-height: 44px;
    background: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 111;
}
.betterScrollBox .center{
    position: fixed;
    top: 44px;
    width: 100%;
    bottom: 50px;
}
.bottom{
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    background: forestgreen;
    text-align: center;
    line-height: 50px;
    color: #fff;
}
</style>