微信小程序全局定義、局部定義導航樣式

微信小程序配置項有一個參數爲：navigationStyle，設置導航欄樣式，僅僅有兩個值，default和custom。

default：默認樣式

custom：自定義樣式，只保留右上角的膠囊樣式

1、全局自定義導航欄樣式

在app.json中設置navigationStyle項

 "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  }

navbar代碼：
navbar.wxml:

<view class='nav-wrap'>
  <!-- 導航欄背景圖片 -->
  <image class="backgroundimg" src="http://img4.imgtn.bdimg.com/it/u=25651867,761734299&fm=26&gp=0.jpg" bindload="imgLoaded"/>
  <!-- // 導航欄 中間的標題 -->
  <view class='nav-title'  style='line-height: {{height*2 + 44}}px; color:#fff'>
    {{navbarData.title}}
  </view>
</view>

navbar.wxss:

/* navbar.wxss */

/* 頂部要固定定位   標題要居中   自定義按鈕和標題要和右邊微信原生的膠囊上下對齊 */

.nav-wrap {
  position: fixed;
  width: 100%;
  top: 0;
  background-image: linear-gradient(#2f52bc, #9198e5, #d0d9f4);
  color: #000;
  z-index: 9999999;
  overflow: hidden;
  font-size: 20px;
  height: 200rpx;
}

/* 背景圖 */

.backgroundimg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* 標題要居中 */

.nav-title {
  position: absolute;
  text-align: center;
  /* max-width: 400rpx; */
  overflow: hidden;
  white-space: nowrap;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 36rpx;
  color: #2c2b2b;
}

.nav-capsule {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  width: 140rpx;
  justify-content: space-between;
  height: 100%;
}

.back-pre {
  width: 32rpx;
  height: 36rpx;
  margin-top: 4rpx;
  padding: 10rpx;
}

.nav-capsule {
  width: 36rpx;
  height: 40rpx;
  margin-top: 3rpx;
}

navbar.js:

const app = getApp()
Component({
  properties: {
    navbarData: {
      //navbarData   由父頁面傳遞的數據，變量名字自命名
      type: Object,
      value: {},
      observer: function (newVal, oldVal) { }
    }
  },
  data: {
    height: '',
    //默認值  默認顯示左上角
    navbarData: {
      showCapsule: 1
    },
    imageWidth: wx.getSystemInfoSync().windowWidth, // 背景圖片的高度
    imageHeight: '', // 背景圖片的長度，通過計算獲取

  },
  attached: function () {
    // 獲取是否是通過分享進入的小程序
    this.setData({
      share: app.globalData.share
    })
    // 定義導航欄的高度   方便對齊
    this.setData({
      height: app.globalData.height
    })
  },
  methods: {
    // 返回上一頁面
    _navback() {
      wx.navigateBack()
    },
    // 計算圖片高度
    imgLoaded(e) {
      console.log(e.detail.height)
      this.setData({
        imageHeight: e.detail.height *
          (wx.getSystemInfoSync().windowWidth / e.detail.width)
      })
    },
    tapName: function () {
      console.log(0)
    }
    //返回到首頁
    // _backhome() {
    //   wx.switchTab({
    //     url: '/pages/index/index'
    //   })
    // }
  },
})

navbar.json:

{
  "component": true,
  "usingComponents": {}
}

2、局自定義導航欄樣式

在當前頁面的JSON文件中設置navigationStyle項

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

topbar.wxml:

<view class='nav-wrap'>
  <!-- 導航欄背景圖片 -->
  <image class="backgroundimg" src="http://img4.imgtn.bdimg.com/it/u=25651867,761734299&fm=26&gp=0.jpg" bindload="imgLoaded" />
  <!-- // 導航欄 中間的標題 -->
  <view class='nav-title' wx:if='{{!navbarData.white}}' style='line-height: {{height*2 + 44}}px;'>
    {{navbarData.title}}
  </view>
  <view class='nav-title' wx:else='{{!navbarData.white}}' style='line-height: {{height*2 + 44}}px; color:#fff'>
    {{navbarData.title}}
  </view>
  <view style='display: flex; justify-content: space-around;flex-direction: column'>
    <view class='nav-capsule' style='height: {{height*2 + 44}}px;'>
    <!-- 左上角返回按鈕 -->
      <view class="back-view">
        <image src='../../../img/fanhui.png' mode='aspectFit' class='back-pre' bindtap='_navback'></image>
        <image src='../../../img/home.png' mode='aspectFit' class='back-pre' bindtap='_backhome'></image>
      </view>
    </view>
  </view>
</view>

topbar.wxss:

/* navbar.wxss */

/* 頂部要固定定位   標題要居中   自定義按鈕和標題要和右邊微信原生的膠囊上下對齊 */

.nav-wrap {
  position: fixed;
  width: 100%;
  height: 200rpx;
  top: 0;
  background-image: linear-gradient(#2f52bc, #9198e5, #d0d9f4);
  color: #000;
  z-index: 9999999;
  overflow: hidden;
  border: 1px solid red;
}

/* 背景圖 */

.backgroundimg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* 標題要居中 */

.nav-title {
  position: absolute;
  text-align: center;
  max-width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 36rpx;
  color: #2c2b2b;
  font-weight: 450;
}

.nav-capsule {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  width: 140rpx;
  justify-content: space-between;
  height: 100%;
}

.back-view {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 15rpx;
}

.back-view image:nth-child(1) {
  margin-right: 22rpx;
}

.back-pre {
  width: 32rpx;
  height: 36rpx;
  /* margin-top: 4rpx; *//* padding: 10rpx; */
}

.nav-capsule {
  width: 36rpx;
  height: 40rpx;
  margin-top: 3rpx;
}

topbar.json

{
  "usingComponents": {},
  "component": true
}

topbar.js

const app = getApp()
Component({
  properties: {
    navbarData: {
      //navbarData   由父頁面傳遞的數據，變量名字自命名
      type: Object,
      value: {},
      observer: function(newVal, oldVal) {}
    }
  },
  data: {
    height: '',
    //默認值  默認顯示左上角
    navbarData: {
      showCapsule: 1
    },
    imageWidth: wx.getSystemInfoSync().windowWidth, // 背景圖片的高度
    imageHeight: '', // 背景圖片的長度，通過計算獲取
  },
  attached: function() {
    // 獲取是否是通過分享進入的小程序
    this.setData({
      share: app.globalData.share
    })
    // 定義導航欄的高度   方便對齊
    this.setData({
      height: app.globalData.height
    })
  },
  methods: {
    // 返回上一頁面
    _navback() {
      wx.navigateBack()
    },
    // 計算圖片高度
    imgLoaded(e) {
      console.log(e.detail.height)
      this.setData({
        imageHeight: e.detail.height *
          (wx.getSystemInfoSync().windowWidth / e.detail.width)
      })
    },
    tapName: function() {
      console.log(0)
    },
    //返回到首頁
    _backhome() {
      wx.redirectTo({
        url: '/pages/index/index'
      })
    }
  },
})

在測試頁面引入導航欄組件test.json:

{
  "usingComponents": {
    "nav-bar": "../Components/topbar/topbar"
  },
  "navigationStyle": "custom"
}

test.wxml

<nav-bar  navbar-data='{{nvabarData}}'></nav-bar>
<view  class="container">測試頁面</view>

test.js的data添加數據

    nvabarData: {
      showCapsule: 0, //是否顯示左上角圖標   1表示顯示    0表示不顯示
      title: '測試標題', //導航欄 中間的標題
      white: true, // 是就顯示白的，不是就顯示黑的。
    }