基本思路
写自定义导航组件的时候，需要将组件结构一分为二：状态栏 + 标题栏状态栏高度可通过wx.getSystemInfoSync().statusBarHeight获取标题栏高度：安卓：48px，iOS：44px单位必需跟胶囊按钮一致，用px
详细介绍请看：小程序自定义导航栏适配（完美版）这里就不详细介绍了
获得版本号和状态栏高度（app.wpy）
globalData={statusBarHeight:0,toBar:44} onLaunch() {let _that=this;wx.getSystemInfo({success (res) {_that.globalData.statusBarHeight=res.statusBarHeight;if(res.platform=="ios"){_that.globalData.toBar=44;}else if(res.platform=="android"){_that.globalData.toBar=48;}else{_that.globalData.toBar=44;}}})}
配置页面自定义
config = {navigationBarTitleText: 'test',navigationStyle: 'custom',usingComponents: {'van-icon': '/components/vant/icon/index'}};
在页面中使获取高度
data = {statusBarHeight:20,toBarHeight:44}onLoad() {this.statusBarHeight=this.$parent.globalData.statusBarHeight;this.toBarHeight=this.$parent.globalData.toBar;}
html布局
<view class="ch_top"><view style="height: {{statusBarHeight}}px;"></view><view class="tobar" style="height: {{toBarHeight}}px;"><view class="title" style="height: {{toBarHeight}}px;line-height: {{toBarHeight}}px;"><text>搜索</text></view><view class="back" @tap="onClickBack"><van-icon custom-class="left_custom_class" custom-style="line-height: {{toBarHeight}}px;" name="arrow-left"/></view></view></view>
css样式
.ch_top {background-color: #ffdd00;.tobar{position:relative;.back {position: absolute;left: 0;top: 0;bottom: 0;padding-left: 15rpx;padding-right: 15rpx;.left_custom_class {font-weight: 700;height: 100%;font-size: 36rpx;}}.title {text-align: center;font-weight: 700;font-size: 36rpx;}}}
效果
完成…
