微信小程序自定义顶部导航(超详细)附加效果图

不念不忘少年蓝@ 2023-06-30 09:07 15阅读 0赞

微信头部导航栏可能通过json配置：![format_png][]

现在具体说一下实现步骤及使用方法：

### 步骤： ###

**1.在 app.json 里面把 "navigationStyle" 设置为 "custom"**

这样子之后就只会保留右上角胶囊按钮了。

![format_png 1][]

**2.计算相关值**

因为在不同的手机型号头部那条栏目高度可能不一致，所以为了我们适配更多型号，我们需要计算3个值：

如下图：

![format_png 2][]

1. 整个导航栏的高度；

2. 胶囊按钮与顶部的距离；

3. 胶囊按钮与右侧的距离。

小程序可以通过 **wx.getMenuButtonBoundingClientRect() **获取胶囊按钮的信息  和 **wx.getSystemInfo() **获取设备信息。

如下图：

![format_png 3][]

通过这些信息我们可以计算出上面说的3个值：

1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )\*2；

2. 胶囊按钮与顶部的距离 = top；

3.胶囊按钮与右侧的距离 = windowWidth - right。

App.js 代码如下：我这里是小程序云开发,不是普通小程序,方法都是一样的,只要看懂了,不用在乎是否和别人的一致

App({
      globalData: {
        
      },
      onLaunch: function () {
        let menuButtonObject = wx.getMenuButtonBoundingClientRect();
        wx.getSystemInfo({
          success: res => {
    
            //导航高度
            let statusBarHeight = res.statusBarHeight,
              navTop = menuButtonObject.top,
              navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
              // console.log(statusBarHeight)
              // console.log(menuButtonObject.height)
              // console.log(menuButtonObject.top)
              // console.log(statusBarHeight)
              // console.log(navHeight)
            this.globalData.navHeight = navHeight;
            this.globalData.navTop = navTop;        //navTop
            this.globalData.windowHeight = res.windowHeight;
          },
          fail(err) {
            console.log(err);
          }
        })
      }
    })

**3.因为这个头部导航是公共的，所以我们最好把它设置成一个组件，命名为navbar**

![format_png 4][]

index.wxml:

<view class="navbar custom-class" style='height:{
       {navHeight}}px;background-color:{
       {bgColor}}'>
      <view wx:if="{
       {showNav}}" class="navbar-action-wrap navbar-action-group row item-center" style='top:{
       {navTop}}px;background-color:rgba(255,255,255,.6)'>
          <ss-icon name="back" color="{
       {iconColor}}" size="15px" block="{
       {true}}" class="navbar-action_item" bind:click="_navBack"></ss-icon>
          <ss-icon name="index" color="{
       {iconColor}}" size="15px" block="{
       {true}}" class="navbar-action_item last" bind:click="_toIndex"></ss-icon>
      </view>
      <view class='navbar-title' style='top:{
       {navTop}}px'>
        {
       {pageName}}
      </view>
    </view>

index.js:

// components/navbar/index.js
    const App = getApp();
    
    Component({
      options: {
        addGlobalClass: true,
      },
      /**
       * 组件的属性列表
       */
      properties: {
        pageName:String,
        showNav:{
          type:Boolean,
          value:true
        },
        showHome: {
          type: Boolean,
          value: true
        }
      },
    
      /**
       * 组件的初始数据
       */
      data: {
       
      },
      lifetimes: {
        attached: function () {
          this.setData({
            navH: App.globalData.navHeight
          })
         }
      },
      /**
       * 组件的方法列表
       */
      methods: {
        //回退
        navBack: function () {
            wx.navigateBack({
              delta: 1
            })      
        },
        //回主页
        toIndex: function () {
          wx.navigateTo({
            url: '/pages/admin/home/index/index'
          })
        },
      }
    })

index.wxss:

/* components/navbar/index.wxss */
    
    .navbar {
      width: 100%;
      overflow: hidden;
      position: relative;
      top: 0;
      left: 0;
      z-index: 10;
      flex-shrink: 0;
    }
    
    .navbar-title {
      width: 100%;
      box-sizing: border-box;
      padding-left: 115px;
      padding-right: 115px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      position: absolute;
      left: 0;
      z-index: 10;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    
    .navbar-action-wrap {
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      position: absolute;
      left: 10px;
      z-index: 11;
      line-height: 1;
      padding-top: 4px;
      padding-bottom: 4px;
    }
    
    .navbar-action-group {
      border: 1px solid #f0f0f0;
      border-radius: 20px;
      overflow: hidden;
    }
    
    .navbar-action_item {
      padding: 3px 0;
      color: #333;
    }
    
    .navbar-action-group .navbar-action_item {
      border-right: 1px solid #f0f0f0;
      padding: 3px 14px;
    }
    
    .navbar-action-group .last {
      border-right: none;
    }

index.json:

{
      "component": true,
      "usingComponents": {
        "ss-icon": "../icon/index"
      }
    }

ss-icon 是我自定义的一个 icon 组件， 如果你没有这个组件，可以在我使用<ss-icon></ss-icon>的地方换成<view></view>组件，然后里面放入你的图标就可以了。

对于组件不太明白的，可以看下[微信小程序组件][Link 1]相关组件的介绍。

组件已创建完毕，现在说下该组件的**使用方法**：

假设我们需要在index.wxml中需要调用这个组件，

**1.在index.json中引用该组件：**

{
      "usingComponents": {
        "navbar": "/components/navbar/index"
      }
    }

**2.在index.wxml中使用该组件：**

最后的结果如下图所示：

![format_png 5][]

**3.参数说明**

<table> 
 <tbody> 
  <tr> 
   <td>参数</td> 
   <td>说明</td> 
   <td>类型</td> 
   <td>默认值</td> 
  </tr> 
  <tr> 
   <td>page-name</td> 
   <td>当前页面名称</td> 
   <td>String</td> 
   <td>--</td> 
  </tr> 
  <tr> 
   <td>show-nav</td> 
   <td>是否显示左侧图标按钮</td> 
   <td>Boolean</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>bg-color</td> 
   <td>导航背景颜色</td> 
   <td>String</td> 
   <td>#fff</td> 
  </tr> 
  <tr> 
   <td>icon-color</td> 
   <td>左侧图标颜色</td> 
   <td>String</td> 
   <td>#000</td> 
  </tr> 
  <tr> 
   <td>custom-class</td> 
   <td>导航样式</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

如果图标不是你想要的,也没有iconinfo,那就替换了ss-icon

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

最后来张改后的效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzM1ODAzLzIwMTgxMC83MzU4MDMtMjAxODEwMDkxNjU3MzQ2MjYtMTc1NzIwMjg1MC5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzM1ODAzLzIwMTgxMC83MzU4MDMtMjAxODEwMDkxNzAxMTU4NjMtMjEzNjE3MjA5LnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzM1ODAzLzIwMTkwOC83MzU4MDMtMjAxOTA4MjAxMjE4NDAxMTktMTU2MzEwODU2NC5qcGc?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzM1ODAzLzIwMTkwOC83MzU4MDMtMjAxOTA4MjAxMjI3MjM5MDUtMjEyNTAyNzUxMi5wbmc?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzM1ODAzLzIwMTgxMC83MzU4MDMtMjAxODEwMDkxNzA1MDY1MTItMTU0NDU2NzI2Ni5wbmc?x-oss-process=image/format,png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzM1ODAzLzIwMTgxMC83MzU4MDMtMjAxODEwMDkxNzI5NDkyMzEtMTAwMzIzODU1OS5wbmc?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200116153132798.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200116153224735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70