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 siwper内的卡片怎么监听到一个卡片进入了cachedCount范围 / 开始或退出-屏幕显示?
367浏览 • 1回复 待解决
Swiper中子组件高度不同,导致切换时UI显示异常,如何保持Swiper中子组件在高度不同时,Swiper显示不异常?
678浏览 • 1回复 待解决
Stage模型下如何开发一个服务卡片
2433浏览 • 1回复 待解决
有谁知道如何新建一个卡片?
362浏览 • 1回复 待解决
#鸿蒙通关秘籍#如果我想要创建一个服务卡片,DevEco Studio提供了哪些模板?
112浏览 • 2回复 待解决
#鸿蒙学习大百科#swiper如何设置在手机设备上显示一个内容,在折叠屏显示2个内容,在平板设备显示3个内容?
273浏览 • 1回复 待解决
使用terminateSelf如何退回到前一个页面
1996浏览 • 1回复 待解决
元服务免安装时为什么没有在设备上显示卡片?
2859浏览 • 1回复 待解决
FA模型的卡片如何切换为Stage模型的卡片
1776浏览 • 1回复 待解决
HarmonyOS 折叠屏小屏切换大屏自动分栏了 显示异常
54浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙工程中创建一个ArkTS卡片?
65浏览 • 1回复 待解决
无法在卡片正常使用TextTimer组件
361浏览 • 1回复 待解决
HarmonyOS使用tabs组件怎么让多个tab标题从左到右显示,而不是居中显示
523浏览 • 1回复 待解决
Harmony OS开发PA 卡片, 在锁屏状况后卡片不再更新的问题求助!
6869浏览 • 2回复 待解决
自定义一个自己的卡片配置文件myform_config.json,如何关联到卡片的FormExtensionAbility?
428浏览 • 1回复 待解决
一个安卓应用怎么集成鸿蒙的特性,比如“卡片服务”
10881浏览 • 3回复 已解决
HarmonyOS 两个text 不能同时显示 如何在切换显示一个&隐藏另一个的时候, text不会删除重建
454浏览 • 2回复 待解决
在一个模块a自定义了一个class A,在另一个模块定义class B,如何a模块使用A的时候用B替换
308浏览 • 2回复 待解决
使用通用属性 clip 怎么在一个控件上用圆环切割?
1968浏览 • 1回复 待解决
如何让Swiper在一屏中显示两个Item?
1150浏览 • 1回复 待解决
HarmonyOS 网络拦截解析第一个url后,就不继续了
46浏览 • 1回复 待解决
HarmonyOS 用户返回,是退出系统而不是返回上一页面
670浏览 • 2回复 待解决
应用启动前会出现一个白屏。
1113浏览 • 1回复 待解决
#鸿蒙通关秘籍#有人知道吗,在服务卡片上,服务卡片它的架构是怎样的?
116浏览 • 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