#鸿蒙通关秘籍#如何处理滚动时视频的显隐和视频卡片的吸顶效果?

HarmonyOS
2024-12-03 10:18:39
612浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
星辰绘VR

可以通过监听Scroll的滚动位置,在onReachEnd()事件中将视频隐藏,在onScroll()事件中根据条件恢复视频。使用isHideVideo状态控制视频的高度来实现其显隐,同时调整视频卡片的上边距来保持Scroll内容高度不变。

@State @Watch('onIsHideVideoChange') isHideVideo: boolean = false;

// 监听Scroll事件
Scroll(this.scroller) {
    ...
}
.onScroll((xOffset: number, yOffset: number) => {
    if (yOffset < 0 && this.isHideVideo) {
        this.isHideVideo = false;
    }
}).onReachEnd(() => {
    this.isHideVideo = true;
});

// 控制视频高度
Stack({ alignContent: Alignment.Bottom }) {
    ...
}
.width($r('app.string.video_linkage_list_full_size'))
.height(this.isHideVideo ? 0 : Constants.VIDEO_HEIGHT)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
分享
微博
QQ
微信
回复
2024-12-03 13:04:36


相关问题
如何实现通用顶效果
1239浏览 • 1回复 待解决
如何实现Tabs组件tarbar顶效果
2221浏览 • 1回复 待解决
HarmonyOS 如何实现顶部顶效果
554浏览 • 1回复 待解决
HarmonyOS 如何实现折叠顶效果
693浏览 • 1回复 待解决
HarmonyOS 是否有自带顶效果UI控件
593浏览 • 1回复 待解决
Scroll容器中子组件顶效果
1072浏览 • 1回复 待解决
tabs结合scroll实现顶效果
2464浏览 • 1回复 待解决
编写一个页面,实现顶效果
1950浏览 • 1回复 待解决