微信小程序---自定义头部导航栏胶囊按钮

喜欢ヅ旅行 2022-08-29 05:43 780阅读 0赞

![20210731105532912.png][]

第一步：app.json全局配置文件中，window配置项中配置navigationStyle

"window": {
      "navigationStyle": "custom"
    }

第二步：页面实现

wxml：

<view class='nav' style='height:{
       {navH}}px'>
      <view class='title_icon'>
        <image src='https://lms.code-hunter.top/index/icons/l.png' mode='aspectFit' class='back' bindtap='navBack'></image>
        <view></view>
        <image src='https://lms.code-hunter.top/index/icons/home.png' mode='aspectFit' class='home' bindtap='navHome'></image>
      </view>
      <view class='title_text'>
        猎码士
      </view>
    </view>
    
    
    <view style="margin-top: {
       {navH}}px">
      Page Content
    </view>

wxss：

/* 自定义导航 */
     
    .nav {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      background: #fff;
    }
     
    .title_text {
      width: 100%;
      height: 45px;
      line-height: 45px;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 10;
      font-size: 34rpx;
    }
     
    .title_icon {
      position: absolute;
      bottom: 10rpx;
      left: 10rpx;
      border-radius: 70rpx;
      box-sizing: border-box;
      border: 0.5px solid #eaeaea;
      display: flex;
      z-index: 20;
    }
     
    .title_icon image {
      display: inline-block;
      overflow: hidden;
      width: 32rpx;
      height: 36rpx;
      padding: 16rpx 32rpx;
      text-align: center;
    }
     
    .title_icon view {
      height: 18px;
      border-left: 1px solid #eaeaea;
      margin-top: 6px;
    }

js:

Page({
      data: {
        navH: 0
      },
      onLoad: function (options) {
        this.navHeight()
      },
      navHeight: function () {
        var that = this;
        // 获取手机系统信息
        wx.getSystemInfo({
          success: res => {
            //导航高度
            that.data.navH = res.statusBarHeight + 46;
            that.setData({ navH: res.statusBarHeight + 46 })
          }, fail(err) {
            console.log(err);
          }
        })
      },
    
      // 返回上一页
      navBack: function () {
        wx.navigateBack({
          delta: 1
        })
      },
      navHome: function () {
        wx.reLaunch({
          url: '../index/index'
        })
      }
    })

[20210731105532912.png]: /images/20220829/192b7d9c998a4ea6b2fd9126b2b03f20.png