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