自定义微信导航栏

在app.json - window 中开启自定义配置

"navigationStyle" : "custom"

首页的代码：

custom.js

/**
   * 页面的初始数据
   */
  data: {
    bar_Height: wx.getSystemInfoSync().statusBarHeight,
    pos: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * tab选择事件
   */
  tabSelect: function (e) {
    this.setData({
      pos: e.currentTarget.dataset.pos
    })
  },

作者：beatzcs
链接：https://www.jianshu.com/p/8dbadb870382
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

custom.json

{  "enablePullDownRefresh": true}

custom.wxml

<view class='status-bar'>
 <view class='tabar' style='padding-top:{{bar_Height}}px;'>
   <text class='{{pos==0?"active":""}}' bindtap='tabSelect' data-pos='0'>推荐</text>
   <text class='{{pos==1?"active":""}}' bindtap='tabSelect' data-pos='1'>热门</text>
 </view>
</view>

custom.wxss

.status-bar {  
    width: 100%;  background-color: #fdd901;
}
.tabar {  
    display: flex;  justify-content: center;
}
.tabar text {  
    padding: 25rpx 30rpx;  color: #353535;  font-size: 12pt;
}
.tabar .active {  
    color: #fff;
}

个人中心代码：

mine.js

/**
  * 页面的初始数据
  */
 data: {   
      bar_Height: wx.getSystemInfoSync().statusBarHeight
 },

mine.wxml

<view class='tabar' style='top:{{bar_Height}}px;'>
 <view>个人中心</view>
</view>

mine.wxss

.tabar {  
     width: 100%;  
     box-sizing: border-box;  
     position: fixed;  
     text-align: center;  
     font-size: 12pt;  
     color: #fff;  
     background-color: #6cbc72;
}
.tabar view {  
     padding: 25rpx 0rpx;
}

虽然自定义效果还不错，但是要注意进行微信版本的兼容问题，window.navigationStyle 只能支持 6.6.0 以上微信版本，对应基础库版本为 1.9.1。如果需要针对低版本微信进行兼容，要做好兼容性适配。

感觉有一点不好的地方是，一旦开启了自定义，每个页面都要用自定义的导航栏，这就很无奈。比较适合页面数量较少的小程序中，页面较多最好使用<template>进行统一的顶部布局。

               

目前5000+人已关注加入我们