mp-pull-refresh-view

微信小程序下拉刷新上拉加载组件，支持自定义样式和多种加载状态。

功能特点

• 支持下拉刷新和上拉加载更多
• 支持多种刷新样式（默认、圆圈、自定义）
• 可自定义提示文本
• 支持手动触发刷新
• 支持无数据状态显示

安装

npm install miniprogram-pull-refresh-view

使用方法

1. 在页面 JSON 配置中引入组件

   {
     "usingComponents": {
       "pull-refresh-view": "miniprogram-pull-refresh-view"
     }
   }

2. 在页面 WXML 中使用组件

   <pull-refresh-view 
     refreshing="{{refreshing}}" 
     nomore="{{nomore}}" 
     bind:onrefresh="onRefresh"
     bind:loadmore="onLoadMore">
        
     <!-- 在这里放置你的列表内容 -->
     <view wx:for="{{list}}" wx:key="index">
       {{item}}
     </view>
        
   </pull-refresh-view>

3. 在页面 JS 中处理刷新和加载事件

   Page({
     data: {
       list: [],
       refreshing: false,
       nomore: false
     },
        
     onRefresh() {
       // 下拉刷新事件
       this.setData({ refreshing: true });
          
       // 模拟请求数据
       setTimeout(() => {
         this.setData({ 
           list: [/* 新数据 */],
           refreshing: false,
           nomore: false
         });
       }, 2000);
     },
        
     onLoadMore() {
       // 上拉加载事件
       // 模拟请求数据
       setTimeout(() => {
         const newList = [/* 更多数据 */];
         if (newList.length === 0) {
           this.setData({ nomore: true });
         } else {
           this.setData({ 
             list: [...this.data.list, ...newList]
           });
         }
       }, 2000);
     }
   });

   属性说明

   | 属性名 | 类型 | 默认值 | 说明 | | :------------------ | :------ | :------------- | :--------------------------------------- | | refresherEnable | Boolean | true | 是否启用下拉刷新 | | refresherType | String | 'default' | 刷新样式 ('default', 'circle', 'custom') | | loadType | String | 'default' | 加载样式 ('default', 'custom') | | pullText | String | '下拉刷新' | 下拉时提示文本 | | releaseText | String | '松开立即刷新' | 释放时提示文本 | | refreshText | String | '正在刷新' | 刷新时提示文本 | | loadmoreText | String | '加载中' | 加载时提示文本 | | nomoreText | String | '没有更多数据' | 无更多数据时提示文本 | | pullDownHeight | Number | 60 | 下拉触发高度 | | refreshing | Boolean | false | 是否正在刷新 | | scrollY | Boolean | true | 是否允许纵向滚动 | | nomore | Boolean | false | 是否没有更多数据 | | showLoading | Boolean | true | 是否显示加载状态 | | scrollToView | String | '' | 滚动到指定元素 | | scrollWithAnimation | Boolean | false | 滚动时是否使用动画 |

   事件说明

   | 事件名 | 说明 | | :------------------ | :----------------------- | | bind:onrefresh | 下拉刷新时触发 | | bind:loadmore | 滚动到底部加载更多时触发 | | bind:scrolltoupper | 滚动到顶部时触发 | | bind:scrolltolower | 滚动到底部时触发 | | bind:scroll | 滚动时触发 | | bind:onpulling | 下拉时触发 | | bind:onrefreshclose | 刷新关闭时触发 |

   方法说明

   | 方法名 | 说明 | | :-------------- | :----------- | | manualRefresh() | 手动触发刷新 |

   this.selectComponent("#refresh-view").manualRefresh()

4. 自定义样式

   组件支持通过插槽自定义刷新和加载样式：

   <pull-refresh-view 
     refresherType="custom"
     loadType="custom"
     refreshing="{{refreshing}}" 
     nomore="{{nomore}}" 
     bind:onrefresh="onRefresh">
        
     <!-- 自定义下拉刷新区域 -->
     <view slot="refresher">
       <!-- 你的自定义刷新样式 -->
     </view>
        
     <!-- 列表内容 -->
     <view wx:for="{{list}}" wx:key="index">
       {{item}}
     </view>
        
     <!-- 自定义加载更多区域 -->
     <view slot="loader">
       <!-- 你的自定义加载样式 -->
     </view>
        
   </pull-refresh-view>