【HarmonyOS NEXT】swiper能否单独设置某个item不显示指示器

 

【关键字】

swiper / 滑块视图容器 / indicator / 指示器 / 单独 / 不显示

【问题描述】

swiper能否单独设置某个item不显示指示器？

【解决方案】

建议写一段色块遮挡代码以设置item不显示指示器。

具体示例代码如下：

// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = []
  private listener: DataChangeListener

  constructor(list: number[]) {
    this.list = list
  }
  totalCount(): number {
    return this.list.length
  }
  getData(index: number): any {
    return this.list[index]
  }
  registerDataChangeListener(listener: DataChangeListener): void {
    this.listener = listener
  }
  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])
  @State num:number=0
  aboutToAppear(): void {
    let list = []
    for (var i = 1; i <= 10; i++) {
      list.push(i.toString());
    }
    this.data = new MyDataSource(list)
  }
  build() {
    Column({ space: 5 }) {
      if(this.num==0){//色块遮挡
        Text('')
          .width('200')
          .height(20)
          .zIndex(100)
          .backgroundColor(0xAFEEEE)
          .textAlign(TextAlign.Center)
          .fontSize(30)
          .position({x:100,y:130})
      }

      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string,index:number) => {
            Text(item)
              .width('90%')
              .height(160)
              .backgroundColor(0xAFEEEE)
              .textAlign(TextAlign.Center)
              .fontSize(30)

        }, item => item)
      }
      .cachedCount(10)
      .index(0)
      .autoPlay(false)
      .interval(4000)
      .loop(true)
      .duration(1000)
      .itemSpace(0)
      .curve(Curve.Linear)
      .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
        this.num=targetIndex
      })
    }.width('100%')
    .margin({ top: 5 })
  }
}