微信小程序-自定义头部导航

╰半夏微凉° 2022-03-11 06:16 286阅读 0赞

先展示效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwNTQ4Njk_size_16_color_FFFFFF_t_70][]

步骤一：

app.json:中添加

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

步骤二：

app.js：获取手机系统信息及导航高度

App({
      onLaunch: function (options) {
        // 获取手机系统信息
        wx.getSystemInfo({
          success: res => {
            //导航高度
            this.globalData.navHeight = res.statusBarHeight + 46;
          }, fail(err) {
            console.log(err);
          }
        })
      },
      globalData: {
        navHeight: 0
      }
    })

步骤三：

app.wxss：导航样式：

/* 自定义导航 */
    
    .nav {
      width: 100%;
      overflow: hidden;
      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;
    }

步骤四：pages中的页面加入导航index.wxml

<view class='nav' style='height:{
       {navH}}px'>
      <view class='title_icon'>
        <image src='back.png' mode='aspectFit' class='back' bindtap='navBack'></image>
    
        <view></view>
        <image src='home.png' mode='aspectFit' class='home' bindtap='navHome'></image>
      </view>
      <view class='title_text'>
        BPHOTO
      </view>
    </view>
    
    <view class="container" style="margin-top: {
       {navH}}px">
    
    
    </view>

步骤五：pages的页面index.js

const app = getApp()
    Page({
      onLoad: function(options) {
        // swiper设置高度
        var that = this;
        that.setData({
          navH: app.globalData.navHeight
        })
       },
      // 返回上一页
      navBack: function () {
        wx.navigateBack({
          delta: 1
        })
      },
      navHome: function () {
        wx.reLaunch({
          url: '../index/index'
        })
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwNTQ4Njk_size_16_color_FFFFFF_t_70]: /images/20220311/db4b61b924bb48e3acc9dd07eb775bff.png