mescroll-uni 是一个专为 uni-app 框架设计的高性能下拉刷新和上拉加载组件

mescroll-uni 是一个专为 uni-app 框架设计的高性能下拉刷新和上拉加载组件。它完美解决了移动端开发中常见的列表滚动需求，支持一套代码编译到 iOS、Android、H5、小程序等多个平台。

核心技术特点

自动分页与状态管理：内置分页逻辑，自动处理页码计算、数据加载完毕判断，并提供无数据时的友好空布局提示。
高性能渲染 ：基于 wxs + renderjs 技术实现，优化了滚动事件处理，确保在大量数据渲染时依然保持流畅。
丰富的扩展功能：支持自定义下拉/上拉动画、内置返回顶部按钮、支持局部区域滚动（如嵌在弹窗、浮层中）等。
跨端兼容：自动处理各平台间的差异，开发者无需关注底层实现。

如何使用

以下是 mescroll-uni 的基础使用步骤：

1. 安装与引入

可以通过 npm 安装，或者直接在 HBuilderX 的插件市场导入 uni_modules 规范插件：

复制代码

npm install mescroll-uni --save

在页面的 <script> 标签中引入 Mixin：

复制代码

import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 根据实际路径调整

2. 注册 Mixin

在组件的 mixins 选项中注册，以获取组件的生命周期和基础方法：

复制代码

export default {
  mixins: [MescrollMixin],
  // ...
}

3. 编写模板 (Template)

使用 <mescroll-uni> 或 <mescroll-body> 作为列表容器，并绑定核心事件：

复制代码

<template>
  <mescroll-uni 
    @init="mescrollInit" 
    @down="downCallback" 
    @up="upCallback">
    <!-- 数据列表内容 -->
    <view v-for="(item, index) in list" :key="index">
      {{ item.title }}
    </view>
  </mescroll-uni>
</template>

4. 实现核心逻辑 (Script)

在 methods 中处理下拉刷新和上拉加载的业务逻辑：

复制代码

export default {
  data() {
    return {
      list: [], // 数据列表
      upOption: {
        auto: true, // 是否自动触发上拉加载
        page: { num: 0, size: 10 } // 当前页码和每页条数
      }
    }
  },
  methods: {
    // 下拉刷新回调
    downCallback() {
      this.list = []; // 清空列表
      this.mescroll.resetUpScroll(); // 重置列表为第一页并重新加载
    },
    
    // 上拉加载回调
    upCallback(page) {
      // 模拟网络请求
      getDataAPI({ page_no: page.num, page_size: page.size }).then(res => {
        const curPageData = res.data.list;
        const totalSize = res.data.total; // 获取总数据量
        
        // 拼接数据
        this.list = this.list.concat(curPageData);
        
        // 结束加载，传入当前页数据长度和总数据量
        this.mescroll.endBySize(curPageData.length, totalSize);
      }).catch(() => {
        this.mescroll.endErr(); // 加载失败处理
      })
    }
  }
}

💡 进阶提示

Vue 3 支持 ：对于 Vue 3 项目，mescroll-uni 提供了完整的 Composition API 支持，可以使用 useMescroll 等 Hooks 进行开发。
组件选择 ：如果页面不需要局部滚动且包含原生组件（如 video、map），推荐使用 <mescroll-body>；如果需要将列表嵌在弹窗或 Swiper 中，则使用 <mescroll-uni>。
性能优化：对于超长列表，建议配合虚拟列表技术使用以保证极致的流畅度。