uniapp结合mescroll-uni插件实现下拉刷新和上拉加载

uniapp结合mescroll-uni插件实现下拉刷新和上拉加载

mescroll介绍

• 支持uni-app的下拉刷新和上拉加载的组件,支持原生页面和局部区域滚动,支持国际化。
• 官网地址：https://www.mescroll.com/
• DCLOUD插件地址：https://ext.dcloud.net.cn/plugin?id=343

实践应用场景

• 基于uniapp + colorui + uview开发，打包微信小程序，测试通过，使用简单，性能不错，推荐使用。

代码分享（以评论回复列表为示例）

• 模版部分

  <template>
      <view class="page">
          <!-- 其它代码 -->
          <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
              <!-- @init="mescrollInit" @down="downCallback" @up="upCallback"为固定值,不可删改(与mescroll-mixins保持一致) -->
              <!-- 需要更新的数据代码 -->
          </mescroll-body>
          <!-- 其它代码 -->
      </view>
  </template>
  

  特别注意 fixed元素需写在mescroll-body的外面,否则下拉刷新时会降级为absolute

• JS部分

  <script>
      import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
      export default {
          mixins: [MescrollMixin],
          data() {
              return {
                  replyList: [],
                  upOption: {
                      page: {
                          size: 10 // 每页数据的数量,默认10
                      },
                      empty: {
                          use: true,
                          tip: "暂无相关数据。",
                      }
                  },
              }
          },
          methods: {
              /*下拉刷新的回调*/
              downCallback() {
                  this.mescroll.resetUpScroll();
              },
              /*上拉加载的回调*/
              upCallback(page) {
                  let pageNum = page.num; // 页码, 默认从1开始
                  let pageSize = page.size; // 页长, 默认每页10条
                  this.render(pageNum, pageSize)
              },
              render(page, limit) {
                  this.$u.api.courseCommentDetails({
                          course_id: this.courseId,
                          comment_id: this.commentId,
                          page: page,
                          limit: limit
                      })
                      .then(data => {
                          // 接口返回的当前页数据列表 (数组)
                          let curPageData = data.replies;
  
                          // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                          let curPageLen = curPageData.length;
  
                          // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                          let totalSize = data.totals;
  
                          //设置列表数据
                          if (page == 1) this.replyList = []; //如果是第一页需手动置空列表
                          this.replyList = this.replyList.concat(curPageData); //追加新数据
  
                          // 请求成功,隐藏加载状态
                          this.mescroll.endBySize(curPageLen, totalSize);
                      })
                      .catch(res => {});
              },
          }
      }
  </script>
  

  以上应该是最简洁的实现代码了~~