效果图:
![在这里插入图片描述]()
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;
}