# 6.4 刷新器（Refresher）

页面下拉效果

# 实例

# 基础用法

<template>
  <div class="wrapper">
    <title title="dof-refresher"></title>
    <category title="使用案例"></category>
    <list class="scroller" ref="scroller">
      <dof-refresher ref="dof-refresher"
                     scroller-ref="scroller"
                     main-text="下拉即可刷新(自定义)"
                     pulling-text="释放即可刷新(自定义)"
                     refreshing-text="加载中(自定义)"
                     :max-time="5000"
                     :text-width="240"
                     @dofRefresh="onRefresh"
                      @dofTimeout="onTimeout"
                      @dofPullingDown="onPullingDown"></dof-refresher>
      <cell class="cell" v-for="(num,key) in lists" :key="key">
        <div class="panel">
          <text class="text">{{num}}</text>
        </div>
      </cell>
    </list>
  </div>
</template>

<script>
import { DofRefresher } from 'dolphin-intl-ui'

export default {
  components: { DofRefresher },
  data: () => ({
      lists: ['下拉刷新', 'Drop Down', '↓', '↓', '↓', '↓', '↓', '↓'],
      refreshTime: 3000
    }),
    created () {
      setTitle('Refresher');
    },
    methods: {
      onTimeout () {
        this.sto && clearTimeout(this.sto);
        modal.toast({ message: '刷新超时，可定义超时时间', duration: 1 });
      },
      onRefresh (e) {
        this.sto = setTimeout(() => { this.refreshSucc(); }, this.refreshTime);
        modal.toast({ message: '刷新中...', duration: 0.5 });
        this.refreshTime = this.refreshTime === 3000 ? 10000 : 3000;
      },
      refreshSucc () {
        this.$refs['dof-refresher'].dofCancel();
        modal.toast({ message: '刷新成功', duration: 0.5 });
      },
      onPullingDown (e) {
        // e.pullingDistance 为当前下拉距离
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# Attributes

Prop Type Required Default Description
scroller-ref String N - 父级滚动容器的 ref；仅 iOS 的 BindingX 动画分支使用
main-text String N '' 未达到刷新阈值时的提示文本
pulling-text String N '' 达到刷新阈值时的提示文本
refreshing-text String N '' 刷新中的提示文本
max-time Number N 0 刷新超时时间，0 表示不启用超时
text-width Number N 200 文本区域宽度
isRTL Boolean N false 是否启用 RTL（从右到左）布局；默认关闭 ^2.5.6
need-dark-mode Boolean N false 是否启用 M-dark/T-dark 内置暗黑适配

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

# Events

事件名 说明 回调参数
dofRefresh 下拉执行事件 原生 refresh 事件对象 event
dofTimeout 超时事件 -
dofPullingDown 下拉过程事件 event.pullingDistance 为当前下拉距离

# Methods

方法名 说明
dofCancel() 结束刷新状态并取消超时计时

← 6.5 滑杆（Slider） →