本文中的示例共享W微信小程序的自定义导航栏供您参考。详情如下所示。
导航栏可以直接在微信小程序中配置：
目前在南京小程序开发看来只有两种支持，但我们的要求可能需要另外一种颜色等等，所以我们必须修改这一种。
"window":{
"navigationStyle": "custom"
},
我配置了这个属性。现在让我们来看看我的界面。
红色箭头指向自动生成的配置。我不写任何代码。例如，我需要自定义更多用户界面导航栏。在more.js中，我在onLoad（）方法中获取全局存储导航栏的高度，然后将高度设置为组件。
app.js：
/**
* When the widget initialization is complete, onLaunch is triggered (global trigger only once)
*/
onLaunch: function () {
wx.getSystemInfo({
success: res => {
// Navigation altitude
this.globalData.navHeight = res.statusBarHeight+46;
this.navH = res.statusBarHeight;
this.platform = res.platform;
}
})
},
This. globalData. navHeight is a variable defined in app. js:
globalData: {
isPlayMusic :false,
doubanBase: "http://t.yushu.im",
navHeight:0
},
然后进入更多。JS
onLoad: function (options) {
this.setData({
navH: App.globalData.navHeight
})
},
要获取全局变量，请使用：
var App = getApp();
获取全局对象。setData（{}）是更新数据中定义的变量：{}
data: {
navH:0
},
默认值为0
more.wxml：
<view>
<view class='more_main' style='height:{{navH}}px'>
<view class='title_contanier'>
<text>More </text>
</view>
</view>
</view>
more.wxss
.more_title{
margin:0 auto;
margin-top: 75rpx;
text-align:center;
font-size: 32rpx;
}
.title_contanier{
display: flex;
flex-direction: row;
}
.more_main{
width: 100%;
background-color: greenyellow;
}
设计草图：
以上就是今天南京小程序开发说的全部内容。我希望它对每个人的学习都有所帮助，我希望你能更多地支持
南京小程序开发安优网络。
本文地址：
http://www.njanyou.cn/web/2511.html
Tag：
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
承包和建筑行业网站 - 需要关注的重点
下一篇：
信息图表如何帮助您更快地吸引潜在客户
