鸿蒙开发实践——ArkUI组件嵌套滚动优化实践

1. 典型场景

新闻类页面:内容页为Web组件实现,评论区使用ArkUI原生List实现。

主题等应用主页:上半区为推荐页,下半区为分类推荐页(分类栏滑动到顶部后不会消失)。

2. 实现思路(以新闻类为例)

使用Scroll嵌套Web和List组件实现。Scroll作为父组件响应滚动手势,Web和List组件禁用滚动手势,滚动偏移量由父组件Scroll给Web和List组件派发。

2.1 派发逻辑:

手势向上滑动

1)如果web没有滚动到底部,则Scroll将滚动偏移量派发给web,Scroll组件本身不滚动

2)如果web滚动到底部,Scroll没有滚动到底部,则Scroll自身滚动,不给Web和List派发滚动偏移量

3)如果Scroll滚动到底部,则滚动偏移量派发给List,Scroll组件本身不滚动

手势向下滑动

1)如果List没有滚动到顶部,则Scroll将滚动偏移量派发给List,Scroll组件本身不滚动

2)如果List滚动到顶部,Scroll没有滚动到顶部,则Scroll自身滚动,不给Web和List派发滚动偏移量

3)如果Scroll滚动到顶部,则滚动偏移量派发给Web,Scroll组件本身不滚动

3. 关键实现

3.1 禁用Web滚动手势

.onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer, others: Ar
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值