【微信小程序】自定义导航栏|胶囊导航功能以及遇到的坑

小鱼儿 2024-04-19 09:47 67阅读 0赞

最近提出了一个需求在页面栈一层时无返回按钮，两层时显示返回按钮，三层及以上时显示返回加返回首页按钮提高用户体验。于是乎就踏上了自定义胶囊导航的道路  
先看一下效果图：  
一层页面栈  
![在这里插入图片描述][20190916192529274.png]  
两层页面栈  
![在这里插入图片描述][2019091619270986.png]  
三层及以上页面栈  
![在这里插入图片描述][20190916192732186.png]

##### 整体思路： #####

在小程序7.0版本之后是可以在单页面自定义导航栏的，由于我这里的大部分页面是要使用自定义导航栏的并且页面数比较多用单个页面开启自定义导航栏的显然是不太理想的，所以我开起了全局导航栏（我会在下文也会把单页面开启的方法写出）。  
当使用了 navigationStyle:custom 后，之前的顶部标题栏会被删除，右侧的胶囊按钮则会固定在右上角。然后在当前页面添加了三个view(状态栏、标题栏、主体内容)，可以看出三块的布局，我直接写死的高度（注意是px）：状态栏20px，标题栏44px。这个是自定义导航栏的关键，需要去计算这两块的高度，还有返回|首页胶囊按钮的位置。基础库 2.1.0开始可以使用 wx.getMenuButtonBoundingClientRect() 来获得 右侧胶囊按钮的位置信息 ，而有了这个信息，就能相对的算出我们想要在左侧添加的胶囊按钮的位置。通过 wx.getSystemInfoSync()中的statusBarHeight找到状态栏的高度 。  
给大家找了个图  
![在这里插入图片描述][20190916193931893.png]

###### 全局变量 ######

App({
     onLaunch: function (options) {
      // 获取系统信息 & 获取顶部导航栏的高度
        wx.getSystemInfo({
          success: res => {
            this.globalData.systeminfo = res
          }
        })
        // 获取胶囊按钮位置信息
        this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect()
     globalData: {
      systeminfo: {}, // 系统信息
      headerBtnPosi: {} // 胶囊按钮位置信息
     }
    })
    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      //app.json文件
    "window": {
        "navigationStyle": "custom"
      },

这里需要注意wx.getMenuButtonBoundingClientRect()，并不是像wx.getSystmInfo一样有success回调函数，而是像对象一样 wx.getMenuButtonBoundingClientRect().height 来使用。

###### 组件的代码 ######

<view class='navbar-wrap' style="height:{
       {navbarHeight}}px;padding-top:{
       {statusBarHeight}}px;{
       {color?'color:'+color+';':''}}{
       {background?'background:'+background+';':''}}">
        <view class="navbar-text" style='line-height:{
       {navbarBtn.height + navbarBtn.top}}px;'>
            {
       {headTitle}}
        </view>
        <view class="navbar-icon" wx:if='{
       {show}}' style="top:{
       {navbarBtn.top + statusBarHeight}}px;left:{
       {navbarBtn.right}}px;height:{
       {navbarBtn.height}}px;">
            <image class="goBack {
       {haveBack?'goBackle':''}}"  bindtap="_goBack" src="../../assets/image/headerNavbar-fanhui.png"></image>
            <view wx:if='{
       {haveBack}}'></view>
            <image wx:if='{
       {haveBack}}' class="homepage" bindtap="_goHome" src="../../assets/image/headerNavbar-index.png"></image>
        </view>
    </view>
    
    <view class="navbar-loading" style='height:{
       {navbarHeight}}px;line-height:{
       {navbarHeight}}px;'>
        <text> ·  ·  · </text>
    </view>

这里有一个 <手写loading> 是因为顶部导航 相当于是浮动，他会把正文内容给覆盖一部分所以给垫了个盒子；中间三个点的作用是下拉刷新是三个白点会被覆盖，伪装三个点

js代码

const APP = getApp()
    Component({
      properties: {
        title: {
          // 由父页面传递的数据
          type: String,
          observer(newVal) {
            newVal &&
              this.setData({
                headTitle: newVal
              })
          }
        }
      },
      data: {
        // 默认页面title
        headTitle: '', //标题
        background: '',
        color: '',
        show: false, //左边胶囊显示与否
        haveBack: true, // 是否有主页按钮，true 有 false 没有
        statusBarHeight: 0, // 状态栏高度
        navbarHeight: 0, // 顶部导航栏高度
        navbarBtn: {
          // 胶囊位置信息
          height: 0,
          width: 0,
          top: 0,
          bottom: 0,
          right: 0
        }
      }, // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度
      attached() {
        let statusBarHeight = APP.globalData.systeminfo.statusBarHeight // 状态栏高度
        let headerPosi = APP.globalData.headerBtnPosi // 胶囊位置信息
        /**
         * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
         * 菜单按键宽度： 87
         * 菜单按键高度： 32
         * 菜单按键左边界坐标： 278
         * 菜单按键上边界坐标： 26
         * 菜单按键右边界坐标： 365
         * 菜单按键下边界坐标： 58
         */
        let btnPosi = {
          // 胶囊实际位置，坐标信息不是左上角原点
          height: headerPosi.height,
          width: headerPosi.width, // 胶囊top - 状态栏高度
          top: headerPosi.top - statusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
          bottom: headerPosi.bottom - headerPosi.height - statusBarHeight, // 屏幕宽度 - 胶囊right
          right: APP.globalData.systeminfo.screenWidth - headerPosi.right
        }
        let haveBack
        let showCapsule
        if (getCurrentPages().length === 1) {
          // 当只有一个页面栈的时候
          showCapsule = false
          haveBack = false
        } else if (getCurrentPages().length === 2) {
          // 当只有2个页面栈时
          showCapsule = true
          haveBack = false
        } else {
          // 大于三个页面栈
          showCapsule = true
          haveBack = true
        }
        this.setData({
          haveBack: haveBack, //胶囊内小房子房子是否显示
          statusBarHeight: statusBarHeight,
          navbarHeight: headerPosi.bottom + btnPosi.bottom, // 原胶囊bottom + 现胶囊bottom
          navbarBtn: btnPosi,
          show: showCapsule //左胶囊是否显示
        })
      },
      methods: {
        _goBack() {
          APP.navigateBack()
        },
        _goHome() {
          APP.switchTab('/pages/home/home/index')
        }
      }
    })

css内容

/* components/headerNavbar/index.wxss */
    .navbar-wrap {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 9999999;
        background:rgba(255,255,255,1);
        box-sizing: border-box;
        z-index: 9999;
    }
    
    .navbar-text {
        text-align: center;
        font-size: 16px;
        font-family:PingFang SC;
        font-weight: bold;
    }
    
    .navbar-icon {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 88px;
        height: 33px;
        border-radius:17px;
        border:1px solid rgba(245,245,245,1);
        box-sizing: border-box;
    }
    
    .goBack{
        width: 9px;
        height: 16px;
        padding: 6px 14px;
    }
    
    
    .homepage{
        width: 16px;
        height: 16px;
        padding: 8px 14px;
    }
    
    .navbar-icon view {
        height:19px;
        border-left:1px solid #999999;
    }
    
    .navbar-loading {
        background: #F5F5F5;
        text-align: center;
        color: #ffffff;
        font-size: 50px;
    }

到这里自定义导航栏就完成了，咱们垫了个盒子高度也是根据状态栏的高低而变化的所以说是已经适配好了的（苹果、安卓、有无流海）都会造成状态栏的高度不同。同样坑随之也来了。。。。。。。。。。

##### 遇到的坑 #####

在页面里如果不是position: fixed;定位的话还好，但是里面的元素一旦使用position: fixed; top:0;left:0;就会定到屏幕最顶端  
![在这里插入图片描述][20190920183857876.png]  
就像是这样，所以说这个顶部的距离还要动态设定px；但是一个小程序不可能只有一两个position: fixed;每个都要动态获取顶部的px也太麻烦了，所以我想了想放到了全局变量就像是这样（APP.globalData.BarHeight = this.data.navbarHeight）把计算好的px放到了全局里面，然后每个页面都要引这个全局变量还是麻烦，所以我干脆抽了一个组件里面专门放position: fixed;的东西，里面不再使用position: fixed; 代码如下  
wxml：

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]  
上述是我的方法，有更好的方法的可以评论下方，欢迎评论指正。

[20190916192529274.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8a9b571e4629466189d160b61893d542.png
[2019091619270986.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a32d43615aac4981bca793d5a1c786e5.png
[20190916192732186.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2c88d3afb0d84a12bf4cb553dee3bc9c.png
[20190916193931893.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/40a7ef2834c34a7891bfa58d3e705004.png
[20190920183857876.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fd035080f10e4f2bb27f62f4498c2524.png
[https_developers.weixin.qq.com_miniprogram_dev_extended_weui_navigation.html]: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/navigation.html