HarmonyOS Swiper如何在监控到onAreaChange事件的时候进行其他界面的刷新

我的场景是我要在swiper上改一层蒙层，这样的话指示器就无法使用了，因此我需要自己定义swiper的指示器组件，需要监听swiper的onchange事件，然后对自定义的指示器进行重绘

HarmonyOS

FengTianYa

2024-12-24 17:45:59

浏览

回答 1

按赞同

按时间

Heiang

可通过changeIndex方法实现，参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-swiper-V5#changeindex12

示例代码如下：

@Entry
@Component
struct SwiperPage {
  @State message: string = 'Hello World';
  @State curIndex:number = 0
  @State swiperList:number[] = [0,1,2]
  private swiperController: SwiperController = new SwiperController()
  build() {
    Stack({alignContent:Alignment.Bottom}){
      Swiper(this.swiperController) {
        ForEach(this.swiperList,(item:number)=>{
          Text(`${item}`)
            .width('90%')
            .height('100%')
            .backgroundColor(item==0? Color.Brown :Color.Orange)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        },(item:number)=>JSON.stringify(item))
      }
      .loop(true)
      .autoPlay(true)
      .onChange((index:number)=>{
        console.log(`00000000000000000-${index}`)
        this.curIndex = index
      })
      Row(){

      }
      .width('90%')
      .height('100%')
      .backgroundColor(Color.Pink)
      .opacity(0.3)
      Row(){
        ForEach(this.swiperList,(item:number)=>{
          Text()
            .width(30)
            .height(30)
            .backgroundColor(Color.Blue)
            .margin(10)
            .onClick(()=>{
              this.swiperController.changeIndex(item)
            })
        },(item:number)=>JSON.stringify(item))
      }
      .width('100%')
    }
    .height('100%')
    .width('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.