微信小程序用navigationStyle自定义导航栏做法

1.html自己编写一个导航栏结构　

</view>

<view class='title_text'>{{title}}</view>

</view>

2.编写导航栏css样式

.nav {

100%;

height: 66px;

overflow: hidden;

position: relative;

top: 0;

left: 0;

z-index: 10;

background: #FFA822;

}

.title_text {

100%;

height: 45px;

color: white;

line-height: 45px;

text-align: center;

position: absolute;

bottom: 0;

left: 0;

z-index: 10;

font-size: 34rpx;

}

.title_icon {

position: absolute;

bottom: 0rpx;

left: 10rpx;

border-radius: 70rpx;

box-sizing: border-box;

display: flex;

z-index: 20;

}

.title_icon image {

display: inline-block;

overflow: hidden;

60rpx;

height: 60rpx;

padding: 16rpx 32rpx;

text-align: center;

}

.title_icon view {

height: 18px;

border-left: 1px solid #eaeaea;

margin-top: 6px;

}