当前位置:   article > 正文

uniapp uview里面的u-navbar结合u-sticky组件的使用_uview u-navbar 获取高度

uview u-navbar 获取高度

导航栏自定义加需要吸顶产生的问题

如上图直接使用并不能出现tab栏吸顶效果,那是由于u-sticky组件吸顶时与顶部的距离默认为0

那么做如下处理

  1. <u-sticky :offset-top="navbarHeight()">
  2. <u-tabs :list="helpTabList" active-color="#D01F25" :current="helpTabCurrent"
  3. @change="helpChange"></u-tabs>
  4. </u-sticky>

 

  1. // 参考uview导航栏的高度,用来设定吸顶时与顶部的距离,h5不需要操作
  2. navbarHeight() {
  3. let systemInfo = uni.getSystemInfoSync();
  4. /* (750 / systemInfo.windowWidth) */
  5. /* 在uview navBar组件中有一个默认高度,当这个默认高度加上状态栏高度后就是吸顶的位置,由于这两者相加是px,所以最后还需要转为rpx */
  6. let topHeight=0
  7. // #ifdef APP-PLUS
  8. topHeight = 44 + systemInfo.statusBarHeight;
  9. // #endif
  10. // #ifdef MP
  11. let height = systemInfo.platform == 'ios' ? 44 : 48;
  12. topHeight = height + systemInfo.statusBarHeight
  13. // #endif
  14. /* 最后一步将px转为rpx */
  15. return topHeight * (750 / systemInfo.windowWidth)
  16. },

经过上述处理就可以出现吸顶效果了

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/594914
推荐阅读
相关标签
  

闽ICP备14008679号