uniapp中使用mescroll实现下拉刷新以及上拉加载

---

前言

我们在开发小程序或者h5的时候，为了用户体验或项目对数据更新有很高要求，能不能实现像APP一样可以下拉刷新。
那么我推荐你使用mescroll-uni版本，官方传送门:mescroll。
学习建议可以不用去细看每个配置项，可先下载实例源码，直接运行跑起来再来理解。

---

一、布局以及配置

1、mescroll-uni需禁止滚动, 解决scroll-view在Android小程序卡顿的问题

// pages.json
{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "商品列表",
		"disableScroll": true,
		"mp-alipay": {
			"allowsBounceVertical": "NO"
		}
	}
}

2、在app.vue加入公共样式

/*每个页面公共css */
page {
  height: 100%;
  box-sizing: border-box;
  font-size: 32rpx;
  color: $uni-text-color;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

}

::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}

3、页面中布局

采用弹性盒子布局，滚动区域自适应高度，因为使用的uniapp的scrollview组件高度就是继承父级的100%。

<template>
  <view class="home_page">
    <view class="header"></view>
    <view class="container">
      <!-- <mescroll-uni></mescroll-uni> -->
    </view>
  </view>
</template>


<style lang="scss" scoped>
.home_page {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.header {
  height: 300rpx;
  display: grid;
  place-items: center;
  background-image: linear-gradient(
    120deg,
    coral 60%,
    bisque 88%,
    rgb(255, 211, 195) 40%,
    rgba(255, 127, 80, 0.603) 48%
  );
}

.container {
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
</style>

4、vue3引入mescroll

• 在src下面新建目录uni_modules，可以把源码案例的文件直接copy过来。
• 需要用到的组件good-list也一同copy。
• mock请求的api整个文件直接copy。

<template>
  <view class="home_page">
    <view class="header"></view>
    <view class="container">
      <mescroll-uni
        :fixed="false"
        :safearea="true"
        :up="upOption"
        @init="mescrollInit"
        @down="downCallback"
        @up="upCallback"
      >
        <good-list :list="goods"></good-list>
      </mescroll-uni>
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
import { apiGoods } from "@/api/mock.js";
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
const { mescrollInit, downCallback, getMescroll } = useMescroll(); // 调用mescroll的hook
const goods = ref([]); // 数据列表

// 上拉加载配置参数
const upOption = {
  page: {
    num: 0,
    size: 10,
    time: null,
  },
  noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
  empty: {
    tip: "暂无数据", // 提示
    icon: "", // 图标
  },
  toTop: {
    src: "",
  },
  textNoMore: "没有更多了",
};

/**
 * @description: 上拉加载
 * @param {*} mescroll
 */
const upCallback = (mescroll) => {
	
})
</script>

5、完善上拉加载逻辑

这里其实就是你的分页请求接口，笔者就直接使用示例的api了，实际根据接口返回和code进行判断。
提示：请求成功需要调用mescroll.endSuccess并传入length，组件会根据你的配置项来判断是否有下一页。

const upCallback = (mescroll) => {
  //联网加载数据
  apiGoods(mescroll.num, mescroll.size)
    .then((res) => {
      const list = res.list || []; // 当前页数据
      if (mescroll.num == 1) goods.value = []; //如果是第一页需手动制空列表
      goods.value = goods.value.concat(list); //追加新数据
      mescroll.endSuccess(list.length); // 请求成功, 结束加载
    })
    .catch(() => {
      //联网失败, 结束加载
      mescroll.endErr();
    });
};

6、参数的简单说明

• fixed：在使用mescroll-uni固定写法fixed=“false”。
• safearea：兼容ios系统安全区域，也是固定写法。
• up：配置参数，不需要响应式，如果需要响应更改，官方文档提供了方法。这个配置对象可以对empty图标以及下拉加载文本进行修改。
• 其他的基本是通过hook已经写好了，基本上是开箱即用的。

二、mescroll-body

• 这个组件实际就是原生的超出滚动，高度是默认100%，也可以配置top和bottom的偏移量。
• 当滑动到底部以后，vue3需要传入onReachBottom

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)

• pages.json里面的"disableScroll": true这条需要删掉，或者设置为false。

---

三、总结

• 本次使用vite进行的打包，对比打包成微信小程序前后的体积，在没有压缩js情况下，也只是增加不到50k左右，压缩的话体积会进一步减少。
• 滚动条的隐藏问题，可以自行研究了。
• 对于多个tab标签对应的列表，需要缓存数据的这种，可以参考示例代码的mescroll-more-item。
• mescroll-uni和mescroll-body这2个目前使用感受，普通列表加载是没有太大性能上面的区别的，对于长列表或者低版本的机型建议使用mescroll-body原生的滚动。
• 浏览器滑动到底部，再往上拉的时候会报警告，这个问题是可以解决。