写在前:自定义头部标题栏,并封装引用到需要的页面。
实现单页面可用自定义头部(未封装)
首先:根据小程序文档 顶配置项 在需要自定义的页面的json文件中添加下面的配置
{
"navigationStyle": "custom"
}
其次:为适配各手机顶部状态栏高度高度不同,动态获取高度并存放在全局变量中(放到app.js中)
App({
onLaunch: function() {
},
globalData: {
statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
}
})
之后:布局,(注:因为浮动的元素不占位置,所以用空标签来占位置,当然也可以清除浮动的元素带来的影响)
<view class="topbar" style="padding-top:{
{statusBarHeight}}px">
<view class="arrow-box row">
<image src="../image/mine_back.png"></image>
</view>
<view class="input-box row">
<input placeholder="请输入你想找的内容" />
</view>
</view>
<view class="top-comend" style="padding-top:{
{statusBarHeight}}px"></view>
<view>这是测