简介
一款基于官方组件scroll-view进行封装的支持上拉加载下拉刷新的微信小程序组件，需要基础库2.10.1及以上，
项目地址：github
预览
功能
- 下拉刷新
- 上拉加载
- 支持自定义下拉样式
- 支持自定义上拉加载样式
使用示例
{
"usingComponents": {
"pull-refresh-view":"../components/pull-refresh-view/index"
}
}
<pull-refresh-view class="list-container"
bindonrefresh="onRefresh"
refreshing="{
{isRefreshing}}"
bindloadmore="onLoadMore"
nomore="{
{isFinish}}"
pullText="下拉可以刷新"
loadmoreText="加载中...">
<block wx:for="{
{dataList}}" wx:key>
<view class="item">
<text>{
{
item.name}}</text>
</view>
</block>
</pull-refresh-view>
属性配置
| 属性 | 默认 | 说明 |
|---|---|---|
| refresherEnable | true | 是否开启下拉刷新 |
| refresherType | default | 下拉刷新样式，可选：[‘default’，‘circle’，‘custom’]，custom表示用户自定义 |
| pullText | 下拉刷新 | 下拉过程的文案提示，refresherType为default时生效 |
| releaseText | 松开立即刷新 | 下拉达到刷新限定高度的文案提示，refresherType为default时生效 |
| refreshText | 正在刷新 | 刷新中的文案提示，refresherType为default时生效 |
| loadType | default | 上拉加载样式，可选：[‘default’，‘custom’]，custom表示用户自定义 |
| loadmoreText | 加载中 | 上拉加载的文案提示 |
| nomoreText | 没有更多数据 | 全部数据加载完毕的文案提示 |
| pullDownHeight | 60 | 下拉刷新的高度限制，单位px |
| refreshing | false | 是否正在刷新，控制下拉刷新显示 |
| nomore | false | 是否全部加载完毕了 |
| showLoading | true | 是否显示上拉加载 |
| scrollY | true | 是否允许垂直滚动 |
| scrollToView | 无 | 值应为某子元素id（id不能以数字开头），滚动到该元素 |
| scrollWithAnimation | false | 在设置滚动位置时使用动画过渡 |
事件监听
- bindonrefresh：下拉刷新监听
- bindloadmore：上拉加载监听
- bindonpulling：下拉过程监听
- bindscrolltolower：滚动到底部
- bindscrolltoupper：滚动到顶部
- bindscroll：滚动监听
注意事项
需要给pull-refresh-view一个固定高度或百分比高度，通过 WXSS 设置 height，参考项目示例代码