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

101次阅读

共计 1294 个字符，预计需要花费 4 分钟才能阅读完成。

自定义微信小程序头部导航栏，有几种形式

{"navigationStyle": "custom" // 将 navigationStyle 从默认 default 改为 custom}

定义此办法后，头部的导航栏会去掉，导航栏下的元素会间接向上挪动到原导航栏的地位，能够再 app.json 配置成全局沉迷式导航栏，以及在单页面配置沉迷式导航栏。

应用组件
这里应用 vant 组件作为演示

组件配置的 NavBar，款式在官网文档上有阐明，依据文档阐明批改款式即可。
官网文档：https://vant-contrib.gitee.io/vant-weapp/#/nav-bar

因为自定义 navBar 了，导航栏上面的元素会间接向上偏移，须要离顶部的间隔才能够复原到失常的地位，此时设置的间隔依据不同的机型，地位也会不同，所以这里就须要做到机型适配。
形式一：
依据微信小程序胶囊到顶部以及胶囊的高度，算出 navBar 下的内容到顶部的间隔

// js
let pillHeight = wx.getMenuButtonBoundingClientRect().top  // 胶囊到顶部的高度
let pill = wx.getMenuButtonBoundingClientRect().height  // 胶囊的高度
this.setData({topHeight : pillHeight +pill})

// 页面   动静设置 margin-top 高度
 <view class="content_bg" style="margin-top: {{capsuleHeight}}px;"> 内容 </view>

形式二:
依据小程序头部的高度加导航高度的间隔动静计算内容到顶部的间隔

// js
 wx.getSystemInfo({
        success: res => {
          let navWindowHeight = res.statusBarHeight + 46; // 小程序头部的高度 + 导航高度
          this.setData({capsuleHeight : navWindowHeight})  // 赋值高度
        }, fail(err) {console.log(err);
    }
// 页面
<view class="content_bg" style="margin-top: {{capsuleHeight}}px;"> 内容 </view>

因为机型的不同，动静计算的高度也不同，不同机型对胶囊到顶部的高度都有差别，而且获取到的胶囊到顶部或者小程序头部的高度的值单位是 px , 所以间接将获取到的值赋值给间隔顶部的间隔即可，否则在动静计算高度的时候，px 不会动静适配屏幕的大小变动，目前来说用形式二适配率高一些，在开发的时候须要依据理论状况，做不同的调整。

  // tabbar 高度
   getTabHei() {
        wx.getSystemInfo({success: (res) => {console.log(res)
            this.setData({tabBatHeight: res.screenHeight - res.safeArea.bottom + 50})
         }
     })

将计算出来的 tabBatHeight 间接写在页面的行内款式中即可

正文完