npm package: @retailwe/ui-pull-down-refresh
Description: ## 引入
Latest version: 0.0.19

# pull-down-refresh 顶部导航栏

## 引入

全局引入，在miniprogram根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "wr-pull-down-refresh": "@retailwe/ui-pull-down-refresh/index"
}
```

## 代码演示

### 基础用法

由于组件内无法监听页面滚动，需要由页面获取组件实例，并将页面滚动事件传递到组件

```html
<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>
```

```ts
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`来告知组件已经刷新完毕

```html
<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>
```

```ts
Page({
  ...
  onPullDownRefresh_(e: WechatMiniprogram.Event<{ callback: () => void }>) {
    const { callback } = e.detail;
    setTimeout(() => {
      callback && callback();
    }, 1000);
  },
});
```

### 配合带背景图片页面及navbar

*注意：*自定义navbar的页面必须注册到app.json，否则原生navbar不会去掉

```json
{
  "navigationStyle": "custom",  // 开启此配置后，才可用navbar组件替换原生navbar
  // 其他配置
}
```

```html
<!-- 自定义顶部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>
```

```js
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 | 根节点样式类 |