小程序自定义导航栏-微信小程序tab导航

自定义顶部导航栏适用于更改左上角色返回按钮，自定义按钮小程序自定义导航栏，页面正上方为搜索等一系列的需求情况

一、

你在哪个页面自定义小程序自定义导航栏，就在哪个页面的json文件里写入

 "navigationStyle": "custom"

不建议在app.json里面写，单独哪里需要哪里写就行了

二、在wxml文件里写入

<view>
  <view class='nav' style='height:{{navH}}px'>
    <view class='nav-title'>首页</view>
  </view>
  <view scroll-y >
	<view style='padding-top:{{navH}}px'>这里是页面的正是内容</view>
  </view>
</view>

在less文件里

.nav {
    width: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    flex-shrink: 0;
    background: #fff;
  }
  
  .nav-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;
    bottom: 6px;
  }

在js文件里

	data:{
		navH:''
	},
	onload(){
		this.setData({
	      navH: app.globalData.navHeight
	    })
	}

在app.js文件里

onLaunch(){
	// 获取顶部栏信息
    wx.getSystemInfo({
          success: res => {
            //导航高度
            this.globalData.navHeight = res.statusBarHeight + 46
          }, 
          fail:err => {
            console.log(err)
          }
        })
    
},
  globalData: {
    navHeight: 0,
   }

大功告成！ 页面需要啥，自己再修改就成