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
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS Swiper组件在删除数据时如何实现切换到前一个元素而非第一个
1072浏览 • 1回复 待解决
HarmonyOS siwper内的卡片怎么监听到一个卡片进入了cachedCount范围 / 开始或退出-屏幕显示?
1167浏览 • 1回复 待解决
Swiper中子组件高度不同,导致切换时UI显示异常,如何保持Swiper中子组件在高度不同时,Swiper显示不异常?
1726浏览 • 1回复 待解决
Stage模型下如何开发一个服务卡片
3345浏览 • 1回复 待解决
有谁知道如何新建一个卡片?
1156浏览 • 1回复 待解决
HarmonyOS 在应用中使用服务卡片,卡片最终在真机显示为白屏,想了解排查方法。
2204浏览 • 2回复 待解决
使用terminateSelf如何退回到前一个页面
2642浏览 • 1回复 待解决
#鸿蒙通关秘籍#如果我想要创建一个服务卡片,DevEco Studio提供了哪些模板?
1241浏览 • 1回复 待解决
#鸿蒙学习大百科#swiper如何设置在手机设备上显示一个内容,在折叠屏显示2个内容,在平板设备显示3个内容?
1174浏览 • 1回复 待解决
元服务免安装时为什么没有在设备上显示卡片?
4098浏览 • 1回复 待解决
HarmonyOS 可以在build中复用同一个组件对象(而不是重新创建)
824浏览 • 1回复 待解决
HarmonyOS 能否一次性获取应用已被授权的权限列表,而不是一个一个查
923浏览 • 1回复 待解决
使用Preferences存储用户配置,设备重启后卡片显示默认值
584浏览 • 0回复 待解决
FA模型的卡片如何切换为Stage模型的卡片
2711浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙工程中创建一个ArkTS卡片?
1306浏览 • 1回复 待解决
无法在卡片正常使用TextTimer组件
1327浏览 • 1回复 待解决
自定义一个自己的卡片配置文件myform_config.json,如何关联到卡片的FormExtensionAbility?
1132浏览 • 1回复 待解决
一个安卓应用怎么集成鸿蒙的特性,比如“卡片服务”
13110浏览 • 3回复 已解决
Harmony OS开发PA 卡片, 在锁屏状况后卡片不再更新的问题求助!
7882浏览 • 2回复 待解决
HarmonyOS 折叠屏小屏切换大屏自动分栏了 显示异常
1590浏览 • 1回复 待解决
HarmonyOS 卡片上的图片锯齿严重
593浏览 • 1回复 待解决
在一个模块a自定义了一个class A,在另一个模块定义class B,如何a模块使用A的时候用B替换
1458浏览 • 2回复 待解决
应用启动前会出现一个白屏。
2589浏览 • 1回复 待解决
使用通用属性 clip 怎么在一个控件上用圆环切割?
3228浏览 • 1回复 待解决
自定义动画需要自己在实现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