微信小程序自定义导航栏

微信小程序需要自定义导航栏,特别是左上角的自定义设置,可以设置返回按钮,菜单按钮,配置如下:

1、在app.json的window属性中增加:

navigationStyle:custom  

顶部导航栏就会消失,只保留右上角胶囊状的按钮。

2、为了兼容适配所有机型,包括刘海屏,需要动态获取高度,并在app.js中设置:

App({
globalData: {
statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']
}
})

3、在wxml页面自定义导航内容

<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
<text>demo</text>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

4、在app.css中设置统一样式:

.custom{
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 45px;
background: #f2f2f2;
z-index: 999;
}
.custom text{
color: #fff;
font-size: 34rpx;
font-weight: 500;
max-width: 280rpx;
}
.empty_custom{
height: 45px;
width: 100%;
}

5、在js文件中设置高度

Page({
data:{
statusBarHeight: app.globalData.statusBarHeight
}
})
上一篇:HDU 1198 Farm Irrigation (并检查集合 和 dfs两种实现)


下一篇:await与async的简单了解