微信小程序中導(dǎo)航欄一般來說是默認(rèn)的展示標(biāo)題等等，可以做的樣式改變僅僅能通過配置一些官方提供的屬性來實(shí)現(xiàn)。除此之外小程序還提供了navigationStyle這個(gè)屬性可以讓用戶去自定義的實(shí)現(xiàn)導(dǎo)航欄。下面直接奉上代碼來說明實(shí)現(xiàn)沉浸式導(dǎo)航欄。

可以在某個(gè)頁面的json文件中加也可以在全局的app.json中添加屬性和引入組件。 頁面文件

{
  "navigationStyle": "custom"
}
復(fù)制代碼

app.json

  "window":{
    "navigationStyle": "custom"
  },
  "usingComponents": {
    "nav-bar": "/component/navBar/navBar"
  },
復(fù)制代碼

這里定義了兩個(gè)屬性title和whetherShow。title是導(dǎo)航欄的標(biāo)題。whetherShow是為了滿足需求定義是否展示返回上一級(jí)頁面的按鈕。此外還調(diào)用了微信提供的api wx.getSystemInfoSync()用來獲取手機(jī)信息判斷是否是劉海屏

// component/navBar/navBar.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    title: {            // 屬性名
      type: String,     // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
      value: ''     // 屬性初始值（可選），如果未指定則會(huì)根據(jù)類型選擇一個(gè)
    },
    whetherShow:{
      type: String,     // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
      value: ''     // 屬性初始值（可選），如果未指定則會(huì)根據(jù)類型選擇一個(gè)
    }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    navigaTitle:'',
    ws:true,
    statusBarHeight:''
  },

  ready: function() {
    console.log(wx.getSystemInfoSync())
    var temp
    if(this.data.whetherShow=='0'){
      temp=false
    }
    else{
      temp=true
    }
    this.setData({
      navigaTitle:this.data.title,
      ws:temp,
      statusBarHeight:wx.getSystemInfoSync().statusBarHeight
    })
  },

  /**
   * 組件的方法列表
   */
  methods: {
    navigateBack:function(){
      wx.navigateBack({
        delta: 1,
      })
    }
  }
})

復(fù)制代碼

<view class="flxr jcb container" style="height:235rpx">
	<image src="/image/1.jpg" class="img-style" style="height:235rpx"></image>
	<view class="icon flxr aic ml20" bindtap="navigateBack" style="margin-top:{{statusBarHeight}}px">
		<image wx:if="{{ws}}" src="/image/left.png" class="left"></image>
		<view wx:if="{{ws}}" class="backClass">返回</view>
	</view>
	<view class="title" style="margin-top:{{statusBarHeight}}px">{{title}}</view>
	<view class="icon"></view>
</view>
復(fù)制代碼

/* component/navBar/navBar.wxss */
@import '/app.wxss';

.title {
  color: #000;
  height: 50rpx;
  width: 300rpx;
  z-index: 2;
  line-height: 50rpx;
  text-align: center;
  font-size: 36rpx;
  padding-top: 20rpx;
}

.container {
  width: 100%;
  height: 60px;
  position: relative;
  /* background-image: linear-gradient(to right,#FF7C6B,#E33229); */
  position: fixed;
  top: 0;
  z-index: 999;
}

.img-style {
  width: 100%;
  height: 60px;
  position: absolute;
  top: 0;
  z-index: 1;
}

.icon{
  height: 60rpx;
  width: 240rpx;
  z-index: 2;
  padding-top: 20rpx;
}

.left{
  height: 30rpx;
  width: 35rpx;
}

.backClass{
  color: #fff;
  font-size: 30rpx;
}
復(fù)制代碼

<nav-bar title="自定義導(dǎo)航欄" whetherShow="1"></nav-bar>
復(fù)制代碼