HarmonyOS Swiper滑动相关

abs组件可以通过使用TabIndicator来实现在指示器上滑动或点击，进行页面的切换效果。

TabIndicator是一个指示器组件，可以在Tabs组件中使用，用于指示当前选中的Tab。在使用Tabs组件时，需要在XML布局文件中添加Tabs组件，并在代码中设置TabIndicator的相关属性，例如设置指示器的颜色、高度、宽度等。然后在代码中设置Tabs的Adapter，用于管理页面的切换。当用户点击或滑动Tabs组件时，会触发相应的事件，此时可以通过调用Tabs的setCurrentTab方法来切换页面。同时，也可以通过设置OnTabSelectedListener监听器来监听Tab的选择事件，以便在选择Tab时执行相应的操作。可以参考如下文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5

参考如下代码：

import {
  ItemRestriction,
  SegmentButton,
  SegmentButtonItemTuple,
  SegmentButtonOptions,
  SegmentButtonTextItem
} from '@ohos.arkui.advanced.SegmentButton'
@Entry
@Component
struct Index {
  // 配置按钮组数组
  @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({
    buttons: [
      { text: '美妆' },
      { text: '衣服' },
      { text: '鞋子' }
    ] as ItemRestriction<SegmentButtonTextItem>,
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [
      { text: '美妆' },
      { text: '衣服' },
      { text: '鞋子' }
    ] as SegmentButtonItemTuple,
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  // 配置按钮组默认选中项
  @State tabSelectedIndexes: number[] = [2]
  @State singleSelectCapsuleSelectedIndexes: number[] = [1]
  build() {
    Row() {
      Column() {
        Column({ space: 25 }) {
          SegmentButton({
            options: this.tabOptions,
            selectedIndexes: $tabSelectedIndexes
          })
          SegmentButton({
            options: this.singleSelectCapsuleOptions,
            selectedIndexes: $singleSelectCapsuleSelectedIndexes
          })
        }
        .width('90%')
      }
      .width('100%')
    }
    .height('100%')
  }
}
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.