HarmonyOS 鸿蒙Next Swiper循环问题

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

HarmonyOS 鸿蒙Next Swiper循环问题 Swiper少于4个不能循环吗？

看官方文档里面的demo，3个也可以循环的。 我使用中3个就不能循环，设置了loop为true也没用。不知道咋回事

Harmonyos Next教程
2 回复

SwiperExample

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  build() {
    Column({
      space: 5
    }) {
      Swiper(this.swiperController) {
        Text('0')
          .width('90%')
          .height('100%')
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('1')
          .width('90%')
          .height('100%')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('2')
          .width('90%')
          .height('100%')
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .loop(true)
    }
    .width('100%')
    .margin({ top: 5 })
  }
}

Index

@Entry
@Component
struct Index {
  private controller: SwiperController = new SwiperController()
  @State currentIndex: number = 0
  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Swiper(this.controller) {
        Text('0')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Brown)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('1')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('2')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('0')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Brown)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('1')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('2')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .loop(true)
      .itemSpace(20)
      .prevMargin(30)
      .nextMargin(10)
      .indicator(false)
      .onChange((index: number) => {
        this.currentIndex = index;
        if (index > 2) {
          this.currentIndex = index - 3
        }
      })
      // 自定义Indicator组件
      CustomIndicator({ selectedIndex: $currentIndex })
        .margin({ bottom: 20 })
    }
    .width('100%')
    .padding({ left: 10, right: 10 })
    .height('100%')
  }
}

@Component
struct CustomIndicator {
  @Link selectedIndex: number; // 初始化被选定的Indicator下标
  build() {
    Row() {
      ForEach([0, 1, 2], (tabIndex: number) => {
        // 单独一个Indicator组件
        IndicatorItem({
          indicatorIndex: tabIndex,
          selectedIndex: $selectedIndex,
        })
      })
    }
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct IndicatorItem {
  @Prop indicatorIndex: number; // Indicator下标
  @Link selectedIndex: number; // 初始化被选定的Indicator下标
  build() {
    Column() {
      Row()
        .backgroundColor(this.selectedIndex === this.indicatorIndex ? Color.Gray : Color.White)
        .width(this.selectedIndex === this.indicatorIndex ? 24 : 12)
        .height(this.selectedIndex === this.indicatorIndex ? 16 : 12)
        .borderRadius(10)
    }
    .margin({ right: 4 })
  }
}

更多关于HarmonyOS 鸿蒙Next Swiper循环问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS（鸿蒙）Next Swiper循环问题，这里提供一个简洁的解答：

在HarmonyOS中，Next Swiper组件用于实现滑动切换效果。如果遇到循环问题，可能是由于以下几个原因：

  1. 数据源配置：检查提供给Swiper的数据源是否正确配置，确保数据项的数量和顺序满足循环需求。

  2. 循环属性设置：确认Swiper组件的循环属性（如loop）是否已正确设置为true，以启用循环滑动功能。

  3. 滑动事件处理：检查是否有自定义的滑动事件处理逻辑干扰了正常的循环机制，如阻止默认行为或提前终止滑动动画。

  4. 版本兼容性：确认所使用的HarmonyOS版本是否支持当前Swiper组件的循环功能，以及是否有已知的bug或限制。

  5. 组件状态管理：检查Swiper组件的状态管理逻辑，确保在滑动过程中组件的状态能够正确更新，以支持循环滑动。

如果以上检查均未能解决问题，可能是遇到了特定场景下的bug或未预期的行为。此时，建议直接联系官网客服以获取更专业的帮助。

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

回到顶部