1.配置信息app.json：

"window":{"backgroundTextStyle":"light",//非自定义字体位置"navigationBarBackgroundColor":"#fff",//非自定义背景颜色"navigationBarTitleText":"项目名",//标题"navigationBarTextStyle":"white",//右上交三个点和关闭按钮颜色只能配置黑白"navigationStyle":"custom"//自定义需要配置的内容},

2.因为要适配各种手机app.js配置

//获取顶部栏信息wx.getSystemInfo({success:res={//导航高度this.globalData.navHeight=res.statusBarHeight+46;},fail(err){console.log(err);}})

3.在globalData也配置信息

globalData:{userInfo:null,navHeight:0}

4.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}})

5.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:10px15px;}.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;}

6.现在配置完开始使用index.wxml页面引用

view!--自定义头部--viewclass='navbg-white'style='height:{{navH}}px'viewclass='nav-title'viewclass="INinputheader"iconclass="INsearchicon"type="search"size="12"/inputclass="weui-input"placeholder="搜索学习内容"//view/view/viewscroll-viewclass='bg-grayoverflow'style='height:calc(100vh-{{navH}}px)'scroll-yviewclass='hidden'!--正文--view当前位置信息：/view/view/scroll-view/view

7.index.js页面引用

constApp=getApp();//设立顶部栏高度Page({data:{},onLoad:function(options){//自定义头部方法this.setData({navH:App.globalData.navHeight});}})