自定义导航

说明：在微信小程序中系统默认的导航效果可能无法满足一些项目效果的实现，所以需要开发者们去自己设定导航

如何自定义导航

1.首先在要设置的页面的app.json上设置 "**navigationStyle": "custom"**字段，代表取消默认导航

2.自定义导航还要满足各种机型设配的问题，所以在这里直接使用微信小程序内置的wx.getSystemInfoSync()获取设备的相关信息以及 wx.getMenuButtonBoundingClientRect()获取胶囊的相关信息,因为胶囊的位置无法改变，固定的。

代码如下

{
//计算信息
    let info = wx.getSystemInfoSync()
    // console.log(info);设备信息
    let menu_info = wx.getMenuButtonBoundingClientRect()
    // console.log(menu_info);胶囊信息
    //将相关信息参数存到globalData中
     this.globalData.rightSpace = info.windowWidth-menu_info.right//胶囊右边距距离
     this.globalData.topSpace = menu_info.top//胶囊距离顶部距离
     this.globalData.space = menu_info.top - info.statusBarHeight//胶囊上边距离状态栏的距离
     this.globalData.menuHeight = menu_info.height//胶囊高度
     this.globalData.statusBarHeight = info.statusBarHeight//状态栏高度
  globalData: {
    userInfo: null,
    currentIndex:0
  }

在app.js中写入以上代码并将其存入到全局变量globalData中。以便于后续在每一个需要自定义导航页面中都能够拿到相关值

在页面读取值代码如下

const app = getApp().globalData
page({
    data:{
        info:app//里面为相关信息参数
    }
})

具体该如何使用

举一个例子：假设右边距需要和胶囊的右边距保持一致，(一些小程序为了保持页面美观，一般右边距要和胶囊的保持一致)

此时

const app = getApp().globalData
page({
     data:{
         rightSpace:app.rightSpace,//胶囊距离设备的右边距
         navHeight:''
     }
)}

在wxml中直接写入行内样式进行绑定就可以了

<view style="padding-right:{{rightSpace}}px"></view>

那么问题来了，导航栏一般都要固定在最上方，那么正文的内容就会被覆盖

所以接下来需要我们去获取导航的高度

 wx.createSelectorQuery().select('这里填写导航容器的类名').boundingClientRect(res=>{
         this.setData({
             navHeight:res.height//该节点的高度
         })
 }).exec()

获取到高度后直接在wxml中给目标元素增加个上边距(导航高度)

<view class="content" style="padding-top:{{navHeight}}px"></view>

效果图如下

屏幕截图 2024-05-16 142612.png

这是我在写东西时对自定义导航的理解以及总结，有不足之处或者有更好的方法时还请补充！

微信小程序的自定义导航

自定义导航