@retailwe/ui-pull-down-refresh v0.0.19

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

Slots

Event

外部样式类