HarmonyOS 自定义滑动组件

目前没有双向的组件，需要自定义才能实现，可以试下参考此demo：

https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/dragtoswitchpictures/README.md

手势实现滑动效果的方式

拖动手势文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-gestures-pangesture-V5

Column(){
  Stack(){
    Image($r('app.media.background'))
      .width('100%')
      .height('20vp')
    Image($r('app.media.ic_left'))
      .width('30vp')
      .height('30vp')
      .translate({ x: this.offsetX, y: this.offsetY, z: 0 }) // 以组件左上角为坐标原点进行移动
        // 左右拖动触发该手势事件
      .gesture(
        PanGesture(this.panOption)
          .onActionStart((event: GestureEvent) => {
            console.info('Pan start')
          })
          .onActionUpdate((event: GestureEvent) => {
            if (event) {
              if(this.positionX + event.offsetX > this.positionX1) {
                return;
              }
              this.offsetX = this.positionX + event.offsetX
            }
          })
          .onActionEnd(() => {
            this.positionX = this.offsetX
            console.info('Pan end')
          })
      )

    Image($r('app.media.ic_right'))
      .width('30vp')
      .height('30vp')
      .translate({ x: this.offsetX1, y: this.offsetY, z: 0 }) // 以组件左上角为坐标原点进行移动
        // 左右拖动触发该手势事件
      .gesture(
        PanGesture(this.panOption1)
          .onActionStart((event: GestureEvent) => {
            console.info('Pan start')
          })
          .onActionUpdate((event: GestureEvent) => {
            if (event) {
              if(this.positionX1 + event.offsetX < this.positionX) {
                return;
              }
              this.offsetX1 = this.positionX1 + event.offsetX
            }
          })
          .onActionEnd(() => {
            this.positionX1 = this.offsetX1
            console.info('Pan end')
          })
      )
  }
}
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.