@retailwe/ui-pull-down-refresh
v0.0.19
Published
## 引入
Downloads
29
Readme
pull-down-refresh 顶部导航栏
引入
全局引入,在miniprogram根目录下的app.json
中配置,局部引入,在需要引入的页面或组件的index.json
中配置。
// app.json 或 index.json
"usingComponents": {
"wr-pull-down-refresh": "@retailwe/ui-pull-down-refresh/index"
}
代码演示
基础用法
由于组件内无法监听页面滚动,需要由页面获取组件实例,并将页面滚动事件传递到组件
<wr-pull-down-refresh
id="wr-pull-down-refresh">
<text style="margin: 30rpx; font-size: 32rpx">
触发刷新后下拉效果将在2秒后结束
</text>
<view
class="item"
wx:for="{{list}}" wx:key="index"
bindtap="onTap">
{{item}}
</view>
</wr-pull-down-refresh>
Page({
pullDownRefresh: null as WechatMiniprogram.Component.TrivialInstance | null,
data: {
list: Array.from(new Array(30), (_v, i) => i),
},
onLoad() {
this.pullDownRefresh = this.selectComponent('#wr-pull-down-refresh');
},
// 监听页面滚动事件,并调用pull-down-refresh组件的onPageScroll方法
onPageScroll(e) {
this.pullDownRefresh && this.pullDownRefresh.onPageScroll(e);
},
});
有刷新成功回调
下拉距离超过阈值后松开,组件会触发refresh
事件,并携带一个回调函数callback
页面可通过callback
来告知组件已经刷新完毕
<wr-pull-down-refresh
id="wr-pull-down-refresh"
bindrefresh="onPullDownRefresh_">
<text style="margin: 30rpx; font-size: 32rpx">
页面在刷新成功后回调,会显示“刷新成功”并保持一秒,之后结束下拉效果
如果触发下拉刷新后2秒内没有回调,会在2秒后自动结束下拉
</text>
<view
class="item"
wx:for="{{list}}" wx:key="index"
bindtap="onTap">
{{item}}
</view>
</wr-pull-down-refresh>
Page({
...
onPullDownRefresh_(e: WechatMiniprogram.Event<{ callback: () => void }>) {
const { callback } = e.detail;
setTimeout(() => {
callback && callback();
}, 1000);
},
});
配合带背景图片页面及navbar
*注意:*自定义navbar的页面必须注册到app.json,否则原生navbar不会去掉
{
"navigationStyle": "custom", // 开启此配置后,才可用navbar组件替换原生navbar
// 其他配置
}
<!-- 自定义顶部navbar -->
<wr-navbar
id="navbar"
title="自定义的navbar"
color="{{pageNav.color}}"
background="{{pageNav.background}}"
offset-top="{{-176}}"
></wr-navbar>
<wr-pull-down-refresh
id="wr-pull-down-refresh"
color="white"
loadingColorType="white"
background="{{pageNav.background}}"
bindrefresh="onPullDownRefresh_">
<!-- 页面背景 需要将图片加载事件传递给navbar,以便动态计算navbar背景色 -->
<view class="page-background">
<image
class="page-background-img"
src="{{bgImgUrl}}"
style="margin-top: -176rpx"
bindload="onImgLoaded"
binderror="onImgError"/>
</view>
<text style="margin: 30rpx; font-size: 32rpx">
页面在刷新成功后回调,会显示“刷新成功”并保持一秒,之后结束下拉效果
如果触发下拉刷新后2秒内没有回调,会在2秒后自动结束下拉
</text>
<view
class="item"
wx:for="{{list}}" wx:key="index"
bindtap="onTap">
{{item}}
</view>
</wr-pull-down-refresh>
import { STATIC_BASE_URL } from '@/config/constants';
Page({
pullDownRefresh: null as WechatMiniprogram.Component.TrivialInstance | null,
navbar: null as WechatMiniprogram.Component.TrivialInstance | null,
data: {
list: Array.from(new Array(30), (_v, i) => i),
pageNav: {
color: 'white',
background: 'linear-gradient(90deg,#FFAB44 0%,#FF7333 100%)',
},
bgImgUrl: STATIC_BASE_URL + 'order/bg-order-pengding-pay.png',
},
onLoad() {
this.navbar = this.selectComponent('#navbar');
this.pullDownRefresh = this.selectComponent('#wr-pull-down-refresh');
},
onPageScroll(e) {
this.navbar && this.navbar.methods.onScroll.call(this.navbar, e.scrollTop);
this.pullDownRefresh && this.pullDownRefresh.onPageScroll(e);
},
onPullDownRefresh_(e: WechatMiniprogram.Event<{ callback: () => void }>) {
const { callback } = e.detail;
setTimeout(() => {
callback && callback();
}, 1000);
},
onImgLoaded(e: any) {
this.navbar && this.navbar.onImgLoaded(e);
},
onImgError(e: any) {
this.navbar && this.navbar.onImgError(e);
},
});
API
loading Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| background | 下拉区域的背景,支持渐变色和图片 | string | #F5F5F5
| - |
| loadingColorType | 加载icon的类型,目前icon是图片,可选值gray
或white
| string | gray
| - |
| color | 文字颜色 | string | #999999
| - |
| fontSize | 文字大小,icon大小会随着fontsize
一起变化 | string | 24rpx
| - |
| useLoadingSlot | 是否自定义loading动画,启用后会在刷新过程显示自定义的loading效果 | false |
Slots
| 名称 | 说明 | | --- | --- | | loading | 自定义的loading效果 | | - | 页面内容 |
Event
| 事件名 | 说明 | 参数 |
|------|------|------|
| refresh | 下拉距离超过阈值后松开时触发,可通过callback
通知组件已刷新完毕 | { callback }
|
外部样式类
| 类名 | 说明 | |-----------|-----------| | wr-class | 根节点样式类 |