html
引用需要自行更改图片路径
<view class="bac-box"></view>
<!-- 自定义导航栏 -->
<view class="navigation-box">
<!-- 返回键 -->
<view class="back_but" @tap="back">
<image src="../../static/shopping/back.png" style="width: 40upx;height: 40upx;" mode=""></image>
</view>
<!-- 标题 -->
<view class="title">
详情
</view>
<!-- 右侧符号 -->
<view class="right-biao">
<image src="../../static/topic/diandiandian.png" style="width: 56upx;height: 18upx;" mode=""></image>
</view>
</view>
css代码
.bac-box {
position: fixed;
top: 0;
width: 100%;
// background: linear-gradient(90deg, #FC552E 0%, #FA2E1A 100%); //渐变色的背景
background-color: #FFFFFF;
height: 70upx;
z-index: 1001;
}
//自定义导航栏
.navigation-box {
position: fixed;
top: 70upx;
height: 93upx;
background-color: #FFFFFF;
width: 100%;
z-index: 100;
border-bottom: 1rpx solid #EEEEEE;
display: flex;
justify-content: space-between;
padding: 0upx 32upx;
align-items: center;
//返回按钮
.back_but {
width: 40upx;
height: 40upx;
}
//标题
.title {
font-size: 36upx;
color: #333333;
font-weight: 500;
}
//右侧小标
.right-biao{
width: 56upx;
height: 18upx;
}
}
返回事件
//返回上一级
back() {
uni.navigateBack({
delta: 1
});
},