在微信小程序开发过程中，对于底部导航栏可以用微信自定义的tabbar，也可以自定义。

不过在使用自定义时，会遇到实际上页面内容被导航栏遮住的情况。

网上很多解决方案，今天就说下最简单好用的一种。

网上的方法主要分两种：动态设置高度与占位符。

动态设置高度指获取屏幕高度及导航栏的高度，然后减去高度差设置页面的高度。

代码如下：

const res = wx.getSystemInfoSync()
const { screenHeight, safeArea: { bottom } } = res
console.log('resHeight',res);
if (screenHeight && bottom){
  let safeBottom = screenHeight - bottom
  this.setData({
    height: 48 + safeBottom
  })
}

其中48是我们自定义导航栏的高度。

我没有使用这种方法，每个页面布局不同，都加高度控制有些麻烦，可能会造成兼容问题，所以我采用了占位符的方式。

很简单，就是在页面最下方，加一个tabar高度的空白view就可以了，代码如下：

<view style="height: 100rpx;"></view>

上面的100rpx就是tabbar的高度，可以依据实际情况设置，这样比较方便快捷。

两种办法都行，看个人选择了，能做出想要的效果就好。