uni app锚点定位 、自动吸顶、滚动自动选择对应的锚点

Question

如题所述

Answer 1

本文详述了在小程序页面中实现自动吸顶+锚点功能的过程，效仿淘宝详情页的交互体验。首先，需构建基础的粘性布局（sticky layout），然后，通过滚动事件动态计算并更新被选中锚点的坐标位置。具体步骤如下：

1. **计算滚动距离**：滚动的距离涉及当前滚动位置与锚点位置之间的差值，还需考虑容器与顶部的距离以及页面倾斜（skewY）的影响。

2. **切换标签页**：在切换标签页时，需考虑页面内容不完整的情况。为防止误触发滚动事件，引入`isTabChange`标识进行状态管理。设置延迟以解决安卓机器在完成方法中不延迟可能引发的抖动问题。

优化总结：为解决安卓设备中页面滚动事件在标签切换瞬间的误触发问题，通过引入`isTabChange`标识以及延迟处理，确保页面滚动事件的准确触发。

代码示例：[Gitee仓库链接](gitee.com/crazyu/uni-app...)

通过4小时的开发工作，遇到安卓设备特有的延迟机制问题，耗时一天进行排查与解决。个人推测可能是安卓内核处理机制略逊于iOS，导致此现象。若其他开发者有相关见解，欢迎分享。

我是crazyu，一名前端开发工程师。