mescroll在vue中的使用方式

官方文档

www.mescroll.com/api.html#me…

在 vue-cli 中 mescroll组件的使用:

1. 执行npm命令安装mescroll :   npm install --save mescroll.js

2. 引入mescroll组件 :   import MescrollVue from 'mescroll.js/mescroll.vue'

贴代码

html

<mescroll-vue ref="mescroll" :up="mescrollUp" :down="mescrollDown">
  <div class="pushList" v-for="(item, index) in list" :key="index">
    <div class="push_info">
      <p class="f-16 f-b">{{ item.carModelName }}</p>
      <p class="f-12 col-666">{{ item.carModelId }}</p>
    </div>
  </div>
</mescroll-vue>

js

import MescrollVue from "mescroll.js/mescroll.vue";
import { getRequest } from "../../api/myAxios";

data中：
  // mescroll 的配置项
  mescroll: null, // mescroll实例对象
  mescrollUp: {
    // 上拉加载的配置
    callback: this.upCallback,
    page: {
      num: 0, // 当前页 默认0,回调之前会加1; 即callback(page)会从1开始
      size: 10, // 每页数据条数,默认10
    },
    offset:10,  // 列表滚动到距离底部小于100px,即可触发上拉加载的回调
    htmlNodata:"<p class='upwarp-nodata'>-- 已加载全部数据 --</p>",  // 使用自定义显示完毕
  },
  mescrollDown: {
    // 下拉加载的配置
    isLock: true, // 是否锁定下拉刷新
    use: false,   // 是否启用下拉刷新
    callback:this.downCallBack  
  },
  
  
methods中：
// 上拉加载更多
upCallback(page, mescroll) {
  console.log(page);
  var pageNum = page.num; // 页码, 默认从1开始 如何修改从0开始 ?
  var pageSize = page.size; // 页长, 默认每页10条

  getRequest("/getCarList", { page: pageNum, limit: pageSize })
    .then((res) => {
      console.log(res);
      if (res.code == 0) {
        this.list = [...this.list,...res.data.list]; // 接口返回的当前页数据列表
        var totalPage = res.data.totalPage; // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
        var totalSize = res.data.totalCount; // 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)

        // 方法一(推荐): 后台接口有返回列表的总页数 totalPage
        // 必传参数(当前页的数据个数, 总页数)
        mescroll.endByPage(this.list.length, totalPage);

        // 方法二(推荐): 后台接口有返回列表的总数据量 totalSize
        // 必传参数(当前页的数据个数, 总数据量)
        // mescroll.endBySize(this.list.length, totalSize);
      }
    })
    .catch((err) => {
      // 联网失败的回调,隐藏下拉刷新和上拉加载的状态
      mescroll.endErr();
    });
},

// 下拉加载更多  类似上拉
downCallBack(page, mescroll){
  console.log(page)
},

css

.mescroll {
  position: fixed;
  top: 100px;
  bottom: 52px;
  left: 0;
  right: 0;
  height: auto;
  z-index: 0;
  background: #ffffff;
}