评论

自定义导航栏与position: fixed

小程序开启自定义导航栏,position: fixed; 定位需要动态获取顶部导航栏的高度

公司UI要实现 从别的页面点到商品页时会有返回和首页按钮;

注:除tabBar页面页面其余页面都有所以开全局样式

但是写着写着发现如果我开启了一个 position: fixed; 定位的话会被覆盖掉顶部导航覆盖掉, 所以top值需要获取状态栏的和导航栏的高度

在页面里如果不是position: fixed;定位的话还好,但是里面的元素一旦使用position: fixed; top:0;left:0;就会定到屏幕最顶端


就像是这样,所以说这个顶部的距离还要动态设定px;但是一个小程序不可能只有一两个position: fixed;每个都要动态获取顶部的px也太麻烦了,所以我想了想放到了全局变量就像是这样(APP.globalData.BarHeight = this.data.navbarHeight)把计算好的px放到了全局里面,然后每个页面都要引这个全局变量还是麻烦,所以我干脆抽了一个组件里面专门放position: fixed;的东西,里面不再使用position: fixed; 代码如下

wxml:


<view class="box" style="top:{{topHight}}px">

    <slot></slot>

</view>



js:


const APP = getApp()

Component({

  /**

   * 组件的属性列表

   */

  properties: {},

  lifetimes: {

    attached() {

      this.setData({

        topHight: APP.globalData.BarHeight

      })

    }

  },



  /**

   * 组件的初始数据

   */

  data: {

    topHight: 0 //自定义导航栏的的高度

  },



  /**

   * 组件的方法列表

   */

  methods: {}

})

wxss:


.box{

    width: 100%;

    position: fixed;

    left: 0;

    z-index:999;

}

组件全局注册用的时候直接那它包住position: fixed;元素就好了。

对了前两天看小程序官网有封装的自定义导航栏了,(但是同样position: fixed;也会出现同样现象)有兴趣的自己可以去看下:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/navigation.html

上述是我的方法,有更好的解决办法,请评论我谢谢。

最后一次编辑于  09-20  
点赞 1
收藏
评论

2 个评论