吸顶是传统 web 页面中的一种比较老的交互方式: 吸顶元素的初始位置一般靠近页面顶部,但与顶部有一定的距离 当手指向上滑动超过吸顶元素的初始位置时,把吸顶元素固定在顶部 当手指向下滑动到达吸顶元素的初始位置时,取消吸顶元素在顶部的固定吸顶
在传统 web 页面中的实现思路是监听scroll事件,当页面滚动到一定位置时,做一些处理来改变吸顶元素在窗口中的位置。 快应用与传统 web 页面不同,在框架中,scroll事件仅适用于list组件,且获取的值是滚动的相对坐标值,在使用时,需要通过累加来获取当前滚动位置的绝对坐标。此外,scroll事件在列表滚动时被高频触发,会存在潜在性能问题 因此,在快应用框架中,推荐开发者使用appear事件和disappear事件来实现吸顶效果,appear事件在组件出现时触发,disappear事件在组件消失时触发。 appear事件和disappear事件是组件的通用事件,文档中标有支持通用事件的组件都支持这两个事件,包括div组件、list-item组件等,灵活使用appear事件和disappear事件,就能实现大部分需要判断滚动位置的需求。
具体实现代码参考:
https://developer.huawei.com/con ... se#h1-1610970506990 |