微信小程序 - 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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章