1. 先来看一下未滑动的效果,(样式随便写的,希望尽量简单)

小程序 滑动菜单栏吸顶效果 抖动优化-LMLPHP

2.滑动到菜单栏之后的吸顶效果

 小程序 滑动菜单栏吸顶效果 抖动优化-LMLPHP

 

 3. 我的html布局,小程序我用的是mpvue写的,使用了scss,可以自行下载demo后改为原生小程序标签

小程序 滑动菜单栏吸顶效果 抖动优化-LMLPHP

吸顶效果的实现思路:

1.获取菜单栏距离文档顶部的距离,也就是头部区域的高度headHeight,使用小程序的api,可以获得指定节点的高度

2. 监听页面滚动距离scrollTop,小程序api, onPageScroll,监听页面滚动

3.当scrollTop > headHeight的时候,添加吸顶样式的class,实现吸顶效果

这样写之后,测试了一下,吸顶的时候抖动会比较严重

优化方案

1. 菜单栏初始定位为相对menu-wrapper 绝对定位,这样,可以给内容区增加padding-top,padding-top值为菜单栏的高度

2. 内容区用scroll-view包裹,未吸顶之前,禁用当前scroll-view的滚动,吸顶之后,才启用滚动

加了两个优化方案之后,吸顶效果抖动没这么厉害,ios还是会有点点,安卓就很平滑了。

需要注意的是,使用小程序的api获取头部的高度时,头部的高度需要明确指定了高度,否则获取到的高度可能不准。

完整代码,请上github查看,有注释,推荐点击链接看30秒,哈哈~,https://github.com/daisygogogo/my-demo/blob/master/index.vue

01-13 03:24