微信小程序 - 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 代码：

点击返回


一些图标

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;
}