概要

微信小程序自定义导航栏,有返回和回到首页,复制即用

修改配置

• 既然使用自定义导航栏样式,就把默认的导航栏取消掉

//app.json 文件下设置
"window": {
    "navigationStyle": "custom"
 },

获取各种手机设备的状态栏的高度

// app.js 文件
App({
  onLaunch: function (res) {
    // 处理手机信息
    this.handleSystemInfo()
  },
  globalData: {
    navHeight: '',
    statusHeight: '',
    model: '',
  },
  handleSystemInfo () {
    let sysinfo = wx.getStorageSync('sysinfo')
    if(!sysinfo) {
      sysinfo = wx.getSystemInfoSync()
      wx.setStorageSync('sysinfo', sysinfo)
    }
    this.globalData.model = sysinfo.model
    this.globalData.statusHeight = sysinfo.statusBarHeight
    if (!sysinfo.system.indexOf('iOS') > -1) {
      // 32px + 8px * 2  = 48px
      this.globalData.navHeight = 48 + this.globalData.statusHeight
    } else {
      // 32px + 6px * 2 = 44px
      this.globalData.navHeight = 44 + this.globalData.statusHeight
    }
  },
})

wx.getSystemInfoSync()文档

自定义导航栏组件 navBar组件

• wxml文件

<!--navBar.wxml-->
<cover-view class='nav' style='height:{{navH}}px'>
  <cover-view class='title_icon' wx:if="{{showLeft}}">
    <cover-image class='navtopImg' aria-role="button" src='/assets/image/interest/topbar-back.png' mode='aspectFit' class='back' bindtap='navBack'/>
    <cover-view class='shuxian'></cover-view>
    <cover-image class='navtopImg' aria-role="{{button}}" src='/assets/image/interest/topbar-index.png' mode='aspectFit' class='home' bindtap='navHome'/>
  </cover-view>
  <cover-view class='title_text'> 
    <cover-view class='title_name'>{{title}}</cover-view>
  </cover-view>
</cover-view>
<!-- 撑起盒子的高度 -->
<cover-view class='kong' style='height:{{navH}}px'></cover-view>

wxml文件使用了cover-view,目的是防止项目中video等标签层级过高,覆盖了navBar组件的层级

• wxss文件

/* components/navBar/navTop.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 cover-image {
  display: inline-block;
  overflow: hidden;
  width: 48rpx;
  height: 48rpx;
  padding: 8rpx 20rpx;
  text-align: center;
}
 
.title_icon .shuxian {
  height: 18px;
  border-left: 1px solid #eaeaea;
  margin-top: 6px;
}

.title_name {
  font-family: PingFangSC-Medium;
  font-size: 36rpx;
  color: #333;
  letter-spacing: 0;
  text-align: center;
  line-height: 48rpx;
  display: inline;
}

• js 文件

// components/navTop/navBar.js
const App = getApp();  //获取实例拿到状态栏高度
Component({
  options: {

  },
  /**
   * 组件的属性列表
   */
  properties: {
    title: String,
    showLeft: {
      type: Boolean,
      value: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },
  lifetimes: {
    attached: function () {
      this.setData({
        navH: App.globalData.navHeight
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 返回上一页
    navBack: function () {
      wx.navigateBack({
        delta: 1
      })
    },
    //回到首页
    navHome: function () {
      wx.reLaunch({
        url: '/pages/index/index'
      })
    },
  }
})

导入组件

• 因为navBar组件在全部页面都有使用,所以全局导入

//app.json 文件
"usingComponents": {
    "nav-bar": "/components/navBar/navBar"
}

在页面里使用组件

<nav-top title="测试"></nav-top>

导航栏.png

左边的返回和回到首页的样式是默认展示出来,如果想不要出现

<!--左边的工具栏就会隐藏-->
<nav-top title="测试" showLeft="{{false}}"></nav-top> 

动动手指点赞

如果这篇文章对你有用,请给我点个赞,让我更加有动力写下去,谢谢