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

 

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

 

 

 

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

 

 

 

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

 

 

吸顶效果的实现思路：

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

转载于:https://www.cnblogs.com/daisygogogo/p/10260284.html