mescroll.js 上拉刷新下拉加载

最新推荐文章于 2025-06-09 09:05:51 发布

原创最新推荐文章于 2025-06-09 09:05:51 发布 · 682 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mescroll

学习专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用mescroll.js库进行上拉刷新和下拉加载的功能实现，包括npm安装、组件引入、template配置、data和methods中的设置，以及解决滑动灵敏度问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装 mescroll

npm install --save mescroll.js //不要使用cnpm安装
//引入刷新列表组件
import MescrollVue from ‘mescroll.js/mescroll.vue’

2.在template中设置需要刷新的组件

<!--刷新列表-->
<mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
	需要刷新的列表
</mescroll-vue>

3.在data中设置

mescroll: null,
mescrollUp: {
  callback: this.loadMoreDataCallback,
  page: {
    num: 0, //当前页，默认从0开始,在开始回调之前会加1; 即callback(page)会从1开始
    size: 10 //每页数据条数,默认10
  },
  htmlNodata: '<p class="mescroll_no_more_data">没有更多数据了</p>',
  noMoreSize: 2, //如果列表已无数据,可设置列表总数大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
},

4. 在methods中设置

// 必须设置
  mescrollInit(mescroll) {
    this.mescroll = mescroll;  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
  },
  beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
    next(vm => {
      vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
    })
  },
  beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
    this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
    next()
  },

5.请求方法，也是在methods中设置

// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
loadMoreDataCallback(page, mescroll) {
  // 获取访客列表
  // 记得写page.num ， page.size 页码
  AdminProductManagerRequestManager.getVisitorData('', this.search, AdminProductManagerRequestManager.getSortEvent(this.SortData), this.aim, page.num, page.size, (data, status, info) => {

    if (data.length > 0) {
      console.log(this.clientData);
	// 下面写死的
      if (page.num == 1) this.clientData = [];

      // 刷新数据
      this.clientData = this.clientData.concat(data);

      // 数据渲染成功后,隐藏下拉刷新的状态
      this.$nextTick(() => {
        mescroll.endSuccess(data.length);
      });
    } else {
      // 没有数据后,隐藏下拉刷新的状态
      this.$nextTick(() => {
        mescroll.endSuccess(0);
      });
    }
  });
},
-------------------------如果需要调用重新获取数据就用这个--------------------------------------
 // 刷新数据
 this.mescroll.resetUpScroll()

6.避免滑动不灵设置css！！！！

-webkit-overflow-scrolling:touch;
.mescroll {
      padding-top: 105px;
      position: fixed;
      padding-bottom: 1rem;
      top: 2px;
      bottom: 0;
      height: auto;
    }