公司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](https://developers.weixin.qq.com/miniprogram/dev/extended/weui/navigation.html)

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