/wxRefresh

微信小程序上拉刷新、下拉加载组件,支持自定义刷新和加载动画,越界回弹,粘性布局。

Primary LanguageJavaScript

wxRefresh

微信小程序上拉刷新、下拉加载组件,支持自定义刷新和加载动画,越界回弹,粘性布局。

特点

  • 自定义刷新和加载
  • 越界回弹
  • 粘性布局(Sticky)
  • 空内容默认显示

概述

wxRefresh能够满足大多数微信小程序列表的需求,减免了繁琐且重复的开发,提高了开发效率。同时wxRefresh提供了多种事件和属性,给开发提供做够多的扩展能力。

属性

属性 类型 默认值 必填 功能 备注
refresh boolean true 刷新标识 100:强制刷新;0:正常刷新完成;1:刷新完成且没有数据了;-1:刷新失败
load boolean true 加载标识 100:未超过一页加载;0:正常加载完成;1:加载完成且没有数据了;-1:加载失败
duration number 1800 动画展示时长 结束刷新或者加载时,动画展示时长
refresh-enable boolean true 刷新是否启动 默认启用、若无刷新头,则自动禁用,event.detail={space,percent}
load-enable boolean true 加载是否启动 默认启用、若无加载头,则自动禁用,event.detail={space,percent}
refresh-success-height number 0 刷新成功高度 若有刷新头,填写,单位rpx
load-success-height number 0 加载成功高度 若有加载头,填写,单位rpx
space-color string rgba(255, 255, 255, 0) 页面不超过一页填充颜色
top-size number 0 距离顶部的距离 若存在遮盖问题,请添加z-index,单位rpx
bottom-size number 0 距离底部的距离 若存在遮盖问题,请添加z-index,单位rpx
cross-boundary-rebound-height number 0 越界回弹拖拽距离 单位rpx
scroll-space string 0px 页面滚动的距离 若填写纯数字默认为px
rebuild boolean false 是否重新测量各组件 非slot='content',高度发生改变时,设置为true
no-data-to-load-more-enable boolean false 加载控制 load=1,即没有更多数据,是否能够上拉加载

事件

事件 类型 默认值 必填 功能 备注
bind:refresh eventhandle 刷新 刷新时被触发,此时属性refresh自动置为100
bind:load eventhandle 加载 加载时被触发,此时属性load自动置为100
bind:refresh-status eventhandle 下拉 下拉时被触发
bind:refresh-state eventhandle 下拉 下拉时被触发
bind:load-status eventhandle 上拉 上拉时被触发
bind:load-state eventhandle 上拉 上拉时被触发
bind:info eventhandle 高度集合 组件加载完成时触发,各个组件的高度
bind:scroll eventhandle 滚动距离 页面滚动时触发,event.detail={space}
bind:drag eventhandle 拖拽距离 页面拖拽时触发,event.detail={space}
bind:scroll-drag eventhandle 距离 页面滚动或拖拽时触发,event.detail={space}
bind:drag-end eventhandle 结束触发 页面滚动或拖拽结束时触发
bind:sticky eventhandle 滚动 粘性布局滚动时触发,event.detail={id,percent}
bind:top eventhandle 滚动 滚动到顶部触发
bind:bottom eventhandle 滚动 滚动到底部触发

refresh-status/load-status/refresh-state/load-state 返回的detail表示刷新状态

字段 说明
percent 0% 当前状态的百分比、refresh-state/load-state无此状态
state 1 默认状态,下拉刷新、上拉加载
state 2 松手刷新/松手加载
state 3 刷新中/加载中
state 4 刷新完成/加载完成
state 5 刷新完成,且没有加载到数据/加载完成,且没有加载到数据
state 6 刷新失败/加载失败

slot name

name 必填 说明
header 刷新头,缺失时请添加属性cross-boundary-rebound-height
footer 加载头,缺失时请添加属性cross-boundary-rebound-height
interval 粘性布局以上可滚动出屏幕的Slot
sticky 粘性布局
interval_2 粘性布局以上可滚动出屏幕的Slot
sticky_2 粘性布局
interval_3 粘性布局以上可滚动出屏幕的Slot
sticky_3 粘性布局
content 通常用于列表