配置信息app.json:
"window": { "backgroundTextStyle": "light",//非自定义字体位置 "navigationBarBackgroundColor": "#fff",//非自定义背景颜色 "navigationBarTitleText": "项目名",//标题 "navigationBarTextStyle": "white",//右上交三个点和关闭按钮颜色只能配置黑白 "navigationStyle": "custom"//自定义需要配置的内容 },
因为要适配各种手机app.js配置
// 获取顶部栏信息 wx.getSystemInfo({ success: res => { //导航高度 this.globalData.navHeight = res.statusBarHeight + 46; }, fail(err) { console.log(err); } })
在globalData也配置信息
globalData: { userInfo: null, navHeight: 0 }
app.js完整配置dome
App({ onLaunch: function () { // 获取顶部栏信息 wx.getSystemInfo({ success: res => { //导航高度 this.globalData.navHeight = res.statusBarHeight + 46; }, fail(err) { console.log(err); } }) }, globalData: { userInfo: null, navHeight: 0 } })
app.wxss样式
/* 自定义顶部栏高度 */ .nav{ width: 100%; overflow: hidden; position: relative; top: 0; left: 0; z-index: 10; } .nav-title{ width: 100%; height: 45px; line-height: 45px; text-align: center; position: absolute; bottom: 0; left: 0; z-index: 10; font-family:PingFang-SC-Medium; font-size:36rpx; letter-spacing:2px; } .nav .back{ width: 22px; height: 22px; position: absolute; bottom: 0; left: 0; padding: 10px 15px; } .bg-white{ background-color:#FFCE58; } .bg-gray{ background-color: #f7f7f7; } .overflow{ overflow: auto; } .hidden{ overflow: hidden; } .INinputheader{ width:60%; height:30px; background:rgba(255,255,255,1); border-radius:30px; font-size: 14px; margin-top:7px; position: relative; float: left; margin-left:12px; } .INsearchicon{ position: absolute; left:12px; } .weui-input{ height: 30px; line-height: 30px; text-align: left; padding-left: 30px; letter-spacing:0px; } .INtab{ text-align: left; margin-left: 12px; color: #fff; }
现在配置完开始使用
index.wxml页面引用
<view> <!-- 自定义头部 --> <view class=‘nav bg-white‘ style=‘height:{{navH}}px‘> <view class=‘nav-title‘> <view class="INinputheader"> <icon class="INsearchicon" type="search" size="12"/> <input class="weui-input" placeholder="搜索学习内容"/> </view> </view> </view> <scroll-view class=‘bg-gray overflow‘ style=‘height:calc(100vh - {{navH}}px)‘ scroll-y > <view class=‘hidden‘> <!-- 正文 --> <view>当前位置信息:</view> </view> </scroll-view> </view>
index.js页面引用
const App = getApp();//设立顶部栏高度 Page({ data:{}, onLoad: function (options) { //自定义头部方法 this.setData({ navH: App.globalData.navHeight }); } })