微信小程序 - Vant 實現自定義nav

demo 地址: https://github.com/iotjin/Jh_weapp

效果圖：

js 代碼：

Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },
  ClickBack(){
    wx.navigateBack({
      complete: (res) => {},
    })
  }
})

json 代碼：

{
  "navigationStyle":"custom",
  "usingComponents": {
    "van-nav-bar": "@vant/weapp/nav-bar/index"
  }
}

wxml 代碼：

<!-- <van-nav-bar
  title="標題"
  left-text=""
  right-text="按鈕"
  left-arrow
  bind:click-left="onClickLeft"
  bind:click-right="onClickRight"
/> -->

<!-- 使用其他圖標 -->
<!-- <van-nav-bar title="標題" custom-class="nav" title-class="title">
  <mp-icon icon="back" color="white" size="15" slot="left"></mp-icon>
  <mp-icon icon="search" color="white" size="25" slot="left"></mp-icon>
  <mp-icon icon="search" color="white" size="25" slot="right"></mp-icon>
  <mp-icon icon="add" color="black" size="25" slot="right"></mp-icon>
</van-nav-bar> -->


<!-- view包裹 -->
<van-nav-bar title="標題" custom-class="nav" title-class="title" fixed placeholder>

<view slot="left" class="leftIcon" bindtap="ClickBack">
<van-icon name="arrow-left" color="white" size="25px"  />
</view>

<!-- <view slot="left" class="leftIcon" bindtap="ClickBack">
<van-icon name="search" color="white" size="25px"  />
</view> -->

<view slot="right" class="leftIcon"><van-icon name="plus" color="white" size="25px"  /></view>

</van-nav-bar>

<view class="back" bindtap="ClickBack">點擊返回</view>


<van-divider contentPosition="center">一些圖標</van-divider>

<wux-icon type="ios-add" />
<wux-icon type="ios-add-circle" />
<wux-icon type="ios-arrow-back" />
<!-- https://ionicframework.com/docs/v3/ionicons/ -->

wxss 代碼：

.nav {
  background: red !important;
}

.title {
  color: white !important;
}

.leftIcon {
  background: blue;
  height: 88rpx;
  /* width: 100rpx; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.back{
  width: 200rpx;
  height: 100rpx;
  background: yellow;
}