zoukankan      html  css  js  c++  java
  • 小程序 滑动菜单栏吸顶效果 抖动优化

    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

  • 相关阅读:
    2016-8-29
    2016-8-25
    2016-8-24
    2016-8-23
    2016-8-22
    2016-8-16
    2016-8-15
    深圳_多测师面试 __腾讯云/_高级讲师肖sir
    深圳_多测师面试 _新字节跳动(2020年10月23日)_高级讲师肖sir
    多测师讲解自动化 _RF_(202)高级讲师肖sir
  • 原文地址:https://www.cnblogs.com/daisygogogo/p/10260284.html
Copyright © 2011-2022 走看看