mp-pull-refresh-view

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

功能特点

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

安装

``bash
npm install miniprogram-pull-refresh-view
`

使用方法

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

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

2. 在页面 WXML 中使用组件

`
refreshing="{{refreshing}}"
nomore="{{nomore}}"
bind:onrefresh="onRefresh"
bind:loadmore="onLoadMore">



{{item}}



`

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. 自定义样式

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

`
refresherType="custom"
loadType="custom"
refreshing="{{refreshing}}"
nomore="{{nomore}}"
bind:onrefresh="onRefresh">








{{item}}








``