微信小程序自定义导航栏机型适配

微信小程序导航栏自定义有以下几种方式：{"navigationStyle":"custom"//将navigationStyledefault改为custom}definition这个方法之后，头部的导航栏会被去掉，元素导航栏下方会直接上移到原导航栏的位置。您可以在app.json中配置全局沉浸式导航栏，在单个页面配置沉浸式导航栏。.方法二使用组件这里使用vant组件作为demo组件配置的NavBar。样式在官方文档中有说明，可以根据文档说明修改样式。官方文档：https://vant-contrib.gitee.io/vant-weapp/#/nav-bar模型适配由于自定义navBar，导航栏下方的元素会直接向上偏移，与顶部的距离需要的时候才能回到正常位置。这个时候设置的距离根据不同的机型，位置会不一样，所以这里需要适配机型。方法一：根据微信小程序capsule到顶部的高度和capsule的高度计算navBar下的内容到顶部的距离//jsletpillHeight=wx.getMenuButtonBoundingClientRect().top//capsule到的高度thetopletpill=wx.getMenuButtonBoundingClientRect().height//胶囊的高度this.setData({topHeight:pillHeight+pill})//页面动态设置margin-top高度Content方法二：根据小程序头部高度加上导航高度的距离，动态计算内容到顶部的距离//jswx.getSystemInfo({success:res=>{letnavWindowHeight=res.statusBarHeight+46;//小程序头部高度+导航高度this.setData({capsuleHeight:navWindowHeight})//赋值高度},fail(err){console.log(err);}//页面con帐篷因车型不同，动态计算的高度也不同。不同的模型，胶囊到顶部的高度不同，而获取到的胶囊到顶部或小程序头部的高度的单位是px，所以可以直接将获取到的值赋值给到顶部的距离，否则，动态计算高度时，px不会动态适配屏幕目前方法2的适配率较高，开发时需要根据实际情况做不同的调整。动态计算TabBar的高度//tabbarheightgetTabHei(){wx.getSystemInfo({success:(res)=>{console.log(res)this.setData({tabBatHeight:res.screenHeight-res.safeArea.bottom+50})}})把计算出来的tabBatHeight直接写在页面的内联样式中