微信小程序之导航栏样式修改、自定义导航栏及封装 |
您所在的位置：网站首页 › 自定义摇号小程序 › 微信小程序之导航栏样式修改、自定义导航栏及封装 |
微信小程序之导航栏样式修改、自定义导航栏及封装
|
在微信小程序中我们会经常看到不同字样的顶部标题，这样的样式有的是一样的，而有的却又是不同的导航栏，这是怎么回事呢，在这里我们就探讨一下。(微信小程序json文件不能有注释，复制过去的时候有注释记得自行删除，希望能帮到大家，喜欢的给个赞，感谢) 一、使用微信小程序的默认导航栏1、在app.json中进行如下配置则能够实现全局的顶栏 "window":{ "navigationBarBackgroundColor": "#333",//设置顶栏背景颜色 "navigationBarTextStyle": "black",//导航栏标题颜色，仅支持 black / white "navigationBarTitleText": "首页测试",//设置顶栏文字 "backgroundColor": "#eeeeee",//窗口的背景色 "backgroundTextStyle": "light",//下拉 loading 的样式，仅支持 dark / light }2、而如果想要子页面的顶栏文字不同，则在相应的json文件里添加 { "navigationBarTitleText": "光与影" }结果截图: 
二、使用自定义的导航栏 1、首先需要把默认的导航栏隐藏起来，在app.json文件中设置 "window":{ "navigationStyle": "custom" },2、需要app.js里全局设置获取不同手机的状态栏，注意要先定义一个全局变量navHeight，这样就能把获取到的状态栏高度变成一个全局变量。 //app.js App({ onLaunch: function () { wx.getSystemInfo({ success: res => { //导航高度 this.globalData.navHeight = res.statusBarHeight + 46; }, fail(err) { console.log(err); } }) }, globalData: { userInfo: null, navHeight: 0 } })3、在子页面中拿会拿到全局变量navHeight const App = getApp(); Page({ onLoad: function (options) { this.setData({ navH: App.globalData.navHeight }) }, })4、把拿到的数据显示 |
【本文地址】