HarmonyOS swiper使用customContentTransition后显示异常(卡片盖在了前一个卡片上,而不是切换)

@Entry
@Component
struct Index {
  @State cardChangeAnimationDuration: number = 0
  swiperController: SwiperController = new SwiperController()
  @State autoPlay: boolean = true
  userScrolled: boolean = false
  dataList: Color[] = [Color.Red, Color.Yellow, Color.Blue]

  aboutToAppear(): void {
    setInterval(() => {
      if (this.autoPlay) {
        this.swiperController.showNext()
        promptAction.showToast({ message: '切换下一个卡片' })
      }
    }, 2000);
  }

  build() {
    Stack() {
      Swiper(this.swiperController) {
        ForEach(this.dataList, (item: Color, index) => {
          Text(`卡片${index}`)
            .textAlign(TextAlign.Center)
            .font({ size: 17, weight: 500 })
            .backgroundColor(item)
            .opacity(0.5)
        })
      }
      .autoPlay(false) // 组件不自动轮播,自动轮播逻辑交由VM调用scrollToIndex/showNext实现
      .loop(this.autoPlay)
      .indicator(false)
      .duration(this.cardChangeAnimationDuration) // 切换时长可配置
      .curve(Curve.Linear) // 注:<=API12, duration生效需要配置.curve(Curve.Linear)
      .cachedCount(3)
      .width('100%')
      .height('100%')
      .nestedScroll(SwiperNestedScrollMode.SELF_FIRST)
      .onClick(() => {
        this.cardChangeAnimationDuration = !this.autoPlay ? 700 : 400
        this.autoPlay = !this.autoPlay
        if (this.autoPlay) {
          this.userScrolled = false
        }
      })
      .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
        this.userScrolled = true
      })
      .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {
        if (extraInfo.currentOffset == 0 && this.userScrolled) {
          this.autoPlay = false
        }
      })
      .customContentTransition({
        timeout: 1000,
        transition: (proxy: SwiperContentTransitionProxy) => {

        }
      })
    }
  }
}
HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

自定义动画需要自己在实现customContentTransition这个时,自己处理相关得逻辑,请参考示例4https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-swiper-V5#swipercontentanimatedtransition12%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E

分享
微博
QQ
微信
回复
2天前
相关问题
Stage模型下如何开发一个服务卡片
2433浏览 • 1回复 待解决
有谁知道如何新建一个卡片
362浏览 • 1回复 待解决
使用terminateSelf如何退回到一个页面
1996浏览 • 1回复 待解决
无法卡片正常使用TextTimer组件
361浏览 • 1回复 待解决
如何让Swiper屏中显示Item?
1150浏览 • 1回复 待解决
应用启动会出现一个白屏。
1113浏览 • 1回复 待解决