微信小程序自定义导航栏

本文的例子分享了微信小程序的自定义导航栏，供大家参考。具体内容如下

在微信小程序中，导航栏是：可以直接配置

目前只支持两种，但我们的需求可能需要另一种颜色，所以我们不得不修改这一种。

window ' : { ' navigation style ' : ' custom ' }，我配置了这个属性，现在来看看我的界面。

红色箭头指向配置后自动生成。我没有写任何代码。比如我需要在更多的界面中自定义导航栏，可以在more.js的onLoad()方法中获取全局存储的导航栏的高度，然后将高度设置为components。

app.js:

/* * *小程序初始化完成后，将触发onLaunch(只触发一次全局触发器)*/onlunch : function(){ wx . getsystem info({ success 3360 RES={//navigation height this . global data . nav height=RES . status barheight 46；this . NavH=RES . status barheight；this . platform=RES . platform；} }) }，这个. globalData.navHeight是在app . js:global data : { is play music : false，doubanbase3360' http://t.yushu.im '，navheight :0}中定义的，然后在more.js中获取

Onload:函数(选项){this。setdata ({navh:app。globaldata。navheight})}，要获取全局变量，请使用：

var App=GetApp()；获取的全局对象this.setData({})是在update data:{}中定义的变量

Data: { navH:0 }，默认值为0

more.wxml:

view view class=' more _ main ' style=' height : { { navh } } px ' view class=' title _ contractor ' text class=' more _ title ' more/text/text/view/view/view more . wxss。more _ title { margin:0 auto边距-top : 75 rpx；文本对齐：居中；font-size : 32 rpx；}.title _ contanier { display : flex；flex-direction : row；}.more _ main { width : 100%；背景-颜色：绿黄色；}渲染：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。