mp-pull-refresh-view/README.md

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

# mp-pull-refresh-view

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

## 功能特点

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

## 安装

```bash
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>
   ```