HarmonyOS 鸿蒙Next swiper指示器样式修改

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next swiper指示器样式修改

Stack()

Stack()({
  Swiper(this.swiperController) {
    Image('')
      .backgroundColor(Color.Red)
    Image('')
      .backgroundColor(Color.Red)
    Image('')
      .backgroundColor(Color.Red)
    Image('')
      .backgroundColor(Color.Red)
  }
  .width('100%')
  .height('100%')
  .indicator(
    Indicator
      .dot()
      .itemWidth(16)
      .itemHeight(2)
      .selectedItemWidth(16)
      .selectedItemHeight(2)
      .selectedColor($r('app.color.whiteColor'))
      .color(DFZXImageUtils.covertColor($r('app.color.whiteColor'), 0.4))
      .color(Color.Gray)
  )
}

想改变指示器每个点之间的间距，但是没有发现提供对应的方法


更多关于HarmonyOS 鸿蒙Next swiper指示器样式修改的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
8 回复

Stack({ alignContent: Alignment.BottomEnd }) { Swiper(this.swiperController) { ForEach(this.showArray, (item: string, index: number) => { if (item.type == LiveCardShowType.notice) { NoticePage() .width(this.liveCardWidth) .height(this.liveCardHeight) } else if (item.type == LiveCardShowType.liveCard) { AdCardPage({ detailModel: item.liveOperationDetail, index: index }) .width(this.liveCardWidth) .height(this.liveCardHeight) } }) } .width(this.liveChatPanelWidth) .height(this.bannerCardHeight) .alignRules({ bottom: { anchor: “container”, align: VerticalAlign.Bottom }, left: { anchor: “container”, align: HorizontalAlign.Start } }) .id(“liveCard”) .loop(true) .autoPlay(this.swiperAutoPlay) .interval(5000) .indicator(false) .backgroundColor(Color.Transparent) .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => { console.info("index: " + index) console.info("current offset: " + extraInfo.currentOffset) this.swiperAutoPlay = true }) .onChange((index: number) => { this.currentIndex = index }) if (this.showArray.length > 1) { // 系统的指示器可以定制的方式非常少 Row({ space: 3 }) { ForEach(this.showArray, (item: string, index: number) => { if (this.currentIndex == index) { Text(’’) .backgroundColor(0x99FFFFFF) .width(13) .height(3) .borderRadius(1.5) } else { Text(’’) .backgroundColor(0x33FFFFFF) .width(3) .height(3) .borderRadius(1.5) } }) } .padding({ right: 12, bottom: 8 }) .justifyContent(FlexAlign.End) .width(‘100%’) .height(3) } }


自定义吧，亲测好用。

更多关于HarmonyOS 鸿蒙Next swiper指示器样式修改的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


另外，指示器的圆角又是如何设置的？

如果采用Swiper的指示器，那么指示器的线性渐变色该如何设置？

api9 甚至没有 Indicator 只能展示或者隐藏

API 11+也没用，这玩意一点都不定制，

间距是无法设置的，建议将导航点设为false，然后使用stack组件堆叠的形式（swiper+column）自定义实现一个导航点，然后自定义间距。

这个确实没有

在HarmonyOS（鸿蒙）系统中，修改Next swiper（滑动视图）的指示器样式通常涉及到自定义swiper组件的样式属性。以下是如何直接操作的基本步骤：

  1. 自定义样式：

    • 在你的资源文件中（通常是XML或JSON格式），定义一个新的swiper指示器样式。这可能包括颜色、大小、形状等属性。

  2. 应用样式：

    • 在swiper组件的属性中，引用你定义的指示器样式。这通常通过设置indicator或类似属性来完成，具体属性名可能因版本而异。

  3. 代码实现（如果需要）：

    • 如果你在代码中动态创建swiper，确保在创建swiper实例时，将自定义的指示器样式应用到swiper实例上。

  4. 预览和调试：

    • 运行你的应用并查看swiper组件的指示器样式是否已经按照预期修改。

请注意，具体的属性名和设置方式可能会因HarmonyOS的版本和API而有所不同。建议查阅最新的HarmonyOS开发文档或API参考，以确保使用正确的属性和方法。

如果问题依旧没法解决请联系官网客服，官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部