ArkTS-拖动手势，下拉刷新_arkts下拉刷新

PanGesture（拖动手势）

用于触发拖动手势事件，滑动的最小距离为5vp时拖动手势识别成功。
PanGesture官方解释

示例

import promptAction from '@ohos.promptAction'

@Entry
@Component
struct Index {
  @State
  translateY: number = 0
  @State
  text: string = '下拉即可刷新'
  @State
  loading: boolean = false

  ease(originValue: number = 0) {
    const space = 60
    const damp = 0.3
    if (originValue > space) {
      return space + (originValue - space) * damp
    }
    return originValue
  }

  build() {
    Stack({ alignContent: Alignment.Top }) {
      Row() {
        if (this.loading) {
          LoadingProgress()
            .width(32)
            .aspectRatio(1)
        }
        Text(this.text)
          .fontColor('#999')
          .width(100)
      }
      .height(100)

      List() {
        ListItem() {
          Text('测试1')
            .fontSize(20)
            .lineHeight(50)
            .padding({ left: 20 })
        }

        ListItem() {
          Text('测试2')
            .fontSize(20)
            .lineHeight(50)
            .padding({ left: 20 })
        }

        ListItem() {
          Text('测试3')
            .fontSize(20)
            .lineHeight(50)
            .padding({ left: 20 })
        }

        ListItem() {
          Text('测试4')
            .fontSize(20)
            .lineHeight(50)
            .padding({ left: 20 })
        }
      }
      .backgroundColor('#fff')
      .height('100%')
      .width('100%')
      .translate({ y: this.translateY })
      .gesture(
        PanGesture()
          .onActionUpdate((event: GestureEvent) => {
            this.translateY = this.ease(event.offsetY)
            if (this.translateY > 100) {
              this.text = '释放立即刷新'
            }
          })
          .onActionEnd((event: GestureEvent) => {
            if (this.translateY > 100) {
              this.loading = true
              this.text = '正在刷新中...'
              animateTo({ duration: 300 }, () => {
                this.translateY = 100
              })
              // 加载数据
              setTimeout(() => {
                this.loading = false
                this.text = ''
                animateTo({ duration: 300, onFinish: () => this.text = '下拉即可刷新' }, () => {
                  this.translateY = 0
                })
                promptAction.showToast({ message: '刷新成功' })
              }, 2000)
            } else {
              animateTo({ duration: 300 }, () => {
                this.translateY = 0
              })
            }
          })
      )
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#f3f4f5')
  }
}
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105