1 .要使用定制的导航栏，必须首先在app.json中配置navigationStyle
' window': {
' background text style ' : ' light '，
' navigationbarbackgroundcolor ' : ' # 14cb6b '，
' navigation bar title text ' : ' title text '，
' navigation bar text style ' : ' white '，
' navigationStyle':'custom '
}
2 .通用头部组件(微信小程序当前不支持单个页面设置。 决定使用自定义导航栏后) )。
这样就支持单个页面设置的自定义标头，并将其放置在页面json文件中
index.js文件
const app=getApp () component(properties: ) navbar data :/navbar data是从父页面传递的数据，变量名为type: Object、 名为value336660的观察器3360函数(newval，oldVal ) }，数据： ) height: (，inputvalue3360(} ()， 更容易适应attached:function((/定义导航栏的高度后，为this.setdata ) )。 methods: { //返回上一页_navback({wx.navigateback ) }， //搜索功能search: function (e ) e ) this.triggerevent ) ) search3360 //搜索框clearInput:function () (this.setdata )
通用标题包含后退按钮back、title(title )和搜索框search三个部分，它们分别在根据来自父组件的传输值进行判断时显示。
view class=' nav-wrap ' style=' height : { { height * 220 } } px；' ！ -后退图标按钮--view class=' img ' style=' margin-top : { { height8} } px；' wx : if=' { navbar data.back } } image class=' back ' src=' ./static/icon/s-arrow-back.SVG ' bind tap=-> ' {{navbarData.title}}/view！ -搜索框--view class=' search ' wx : if=' { { navbar data.search } } ' style=' margin-top 3360 { { height7} } px image src=' ./images/search.png '/imageinputplaceholder='搜索任务' confirm-type=' search ' bind confirm=' search
index.css
/*顶部固定放置标题自定义按钮和标题居中放置，与右侧微信本机胶囊上下对齐。 */.nav-wrap { position: fixed； width: 100%； top: 0； background: #14cb6b； color: #fff； z-index: 9999999； 边距- bottom : 10px； (/)标题为(/.nav-title ) text-overflow:Ellipsis； white-space: nowrap； color: #fff； 浮动：左； width: 130px； 字体大小： 16px； padding-left: 10px； }.search { background: #fff； border-radius: 20px； height: 30px； width: 50%； margin: 10px 28% 10px 22%； 定位：关系； 边距-顶级： 28px； }.searchinput { width : clac (100 %-130 px )； height: 30px； 颜色： # 333； 定位：助手； left: 35px； top: 0px； }.search image { width: 20px； height: 20px； 定位：助手； left: 10px； top: 6px； }.img { float: left； width: 30px； height: 30px； }.back { width: 30px； height: 30px； }
index.json
{ 'component': true} 3.组件准备完毕并开始使用。 我现在在主页上用
index.json首先引导组件
{ ' enablepulldownrefresh ' : false，' using components ' : { ' nav-bar ' : ' ././components/navbar/indonts
nav-bar navbar-data=' { nvabardata } ' bind : search=' search ' id=' bar '/nav-barindex.js
//index.js//APP应用程序实例const app=getApp () var util=require (' ./utils/util.js ) ) { data 3360 } nvtapp //导航栏中央标题keyWord: '，search: true }，height: '' }， onshow((//清除搜索框调用子组件的清空函数this.selectcomponent(#bar ' ) )/用各机种大小不一致的app.js取得的statusBarHeight是头部的高度this.setdata (height 3360 app.global data.height，(this.setdata )，search
5 .注意
)获取nabbar高度问题设备顶部窗口的高度(每个设备窗口的高度不同，因此根据此自定义导航栏的高度)。) ) )。
)2) navbar页面已设置为向下移动到相应的高度。 否则，会发生覆盖
)3)如何调用子部件this.selectcomponent('#bar ' ).clearInput )；
(4)调用父组件的方法将bind:search='search '传递给组件，并在子组件中调用this.triggerevent('search '，params )
6 .补充：目前getmenubuttonboundingclientrect可以获取右上角胶囊菜单的大小信息
vardata=wx.getmenubuttonboundingclientrect (；
//console.log (菜单键宽度：“，data.width”
//console.log (菜单键高度：“，data.height”
//console.log (菜单按钮上的边界坐标：“，data.top”
//console.log (菜单按钮的右边界坐标)、data.right ) )。
//console.log (菜单按钮下的边界坐标)、data.bottom ) )。
//console.log (菜单按钮左边距坐标)、data.left ) )。