微信小程序自定义配置顶栏顶栏搜索框

1.配置信息：

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

2。因为需要适配不同的手机配置

//获取顶栏信息({success:res={//导航高度},fail(err) {(err);}})

3.您还可以设置 globalData

globalData:{userInfo:null,navHeight:0}

4。完全配置dome

App({onLaunch:function( ){//获取顶栏信息({success:res={//导航高度},fail(err){(err);}})}, globalData : {userInfo:null,navHeight:0}})

风格

/*自定义顶栏高度*/.nav{width:100%;overflow:hidden;position:relative;top:0;left:0;z-index:10;}.nav-title{width:100 %;高度：45px；行高：45px；文本对齐：中心；位置：绝对；底部：0；左：0；z-index：10；字体系列：PingFang-SC-Medium；字体大小：36rpx；字体间距:2px;}.{宽度:22px;高度:22px;位置:绝对;底部:0;左:0;填充:10px15px;}.bg-white{背景颜色:#FFCE58;}.bg-灰色{背景颜色：#f7f7f7;}.overflow{overflow:auto;}.hidden{overflow:hidden;}.INputheader{宽度:60%;高度:30px;背景:rgba(255,255,255,1);边框半径:30px ;字体大小:14px;上边距:7px;位置:相对;浮动:左;左边距:12px;}.INsearchicon{位置:绝对;左:12px;}.weui-input{高度:30px ;行-高度:30px;文本对齐:左;内边距左:30px;字母间距:0px;}.INtab{文本对齐:左;边距左:12px;颜色:#fff;}

6. 现在配置完成，开始使用页面链接

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='隐藏'!--text--查看当前位置数据：/view/view/scroll-view/view

7.index.js页面链接

constApp=getApp(); //设置顶栏高度 Page({data:{},onLoad:function(options){//自定义头部方法({navH:});}})