更新记录

1.0.0（2025-03-17） 下载此版本

自定义下拉刷新

平台兼容性

uni-app

解决sticky置顶不被原生下拉刷新功能页面整体下移的问题

在使用原生下拉刷新功能时，页面整体会下移，导致sticky置顶效果失效。为了解决这个问题，可以使用自定义下拉刷新组件CustomRefresh。该组件完全解决了小程序下拉刷新时页面下移的问题，确保sticky置顶效果正常。

使用示例

以下是一个使用CustomRefresh组件的示例，展示了如何解决sticky置顶不被原生下拉刷新功能页面整体下移的问题：

CustomRefresh 自定义下拉刷新组件

一个轻量级的微信小程序自定义下拉刷新组件，可以替代原生的下拉刷新，提供更好的用户体验和自定义能力。

功能特点

• 完全自定义的下拉刷新UI
• 类似原生App的下拉刷新体验
• 支持自定义文案和图标
• 支持手动控制刷新状态
• 完全解决小程序下拉刷新时页面下移的问题

使用方法

基本用法

将需要支持下拉刷新的内容包裹在组件内：

<template>
  <custom-refresh 
    :offsetTop="60" 
    @refresh="handleRefresh"
    @refresh-finished="handleRefreshFinished"
    ref="customRefresh"
  >
    <view class="your-content">
      <!-- 页面内容 -->
    </view>
  </custom-refresh>
</template>

<script>
export default {
  methods: {
    handleRefresh() {
      // 执行刷新操作，如加载新数据
      this.loadData();
    },
    handleRefreshFinished() {
      // 刷新结束后可执行的操作
      console.log('刷新完成');
    }
  }
}
</script>

手动触发刷新

// 手动开始刷新
this.$refs.customRefresh.startRefresh();

// 手动结束刷新
this.$refs.customRefresh.finishRefresh();

组件属性

组件事件

组件方法

注意事项

1. 组件内部已处理触摸事件，不需要在父组件中重复处理
2. 组件适用于微信小程序，其他平台没有实测
3. 组件会自动在2秒后结束刷新状态，可通过duration属性调整时间
4. 在微信小程序中使用时，需要关闭原生下拉刷新（enablePullDownRefresh: false），避免与自定义刷新组件冲突,在pages.json中设置对应页面的mp-weixin配置：

   {
       "path": "pages/index/index",
       "style": {
           "mp-weixin": {
               "backgroundTextStyle": "dark",
               "disableScroll": false,
               "enablePullDownRefresh": false
           }
       }
   }