微信小程序自定義導(dǎo)航欄
更新時間：2018年12月31日 10:40:52 作者：zhoushenxian
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義導(dǎo)航欄，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序自定義導(dǎo)航欄，供大家參考，具體內(nèi)容如下
在微信小程序中導(dǎo)航欄是可以直接配置的:
目前只支持二種，但是我們的需求可能需要一個其他的顏色等,那么不得不修改這個了,
"window":{
"navigationStyle": "custom"
},
我就配置了這個屬性,現(xiàn)在來看看我的界面
紅色箭頭指向的是配置后自動生成的,我沒有寫任何代碼，比如我在更多界面導(dǎo)航欄需要自定義,那么在more.js中在onLoad()方法中獲取到全局存儲的導(dǎo)航欄高度,然后高度設(shè)置給組件就行了,
app.js:
/**
* 當(dāng)小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）
*/
onLaunch: function () {
wx.getSystemInfo({
success: res => {
//導(dǎo)航高度
this.globalData.navHeight = res.statusBarHeight+46;
this.navH = res.statusBarHeight;
this.platform = res.platform;
}
})
},
this.globalData.navHeight這個變量是在app.js中定義的：
globalData: {
isPlayMusic :false,
doubanBase: "http://t.yushu.im",
navHeight:0
},
然后在more.js中獲取
onLoad: function (options) {
this.setData({
navH: App.globalData.navHeight
})
},
要獲取全局的變量要使用：
var App = getApp();
獲取到全局對象 this.setData({})是更新data:{}中定義的變量
data: {
navH:0
},
默認(rèn)值是0
more.wxml:
<view>
<view class='more_main' style='height:{{navH}}px'>
<view class='title_contanier'>
<text class="more_title">更多</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;
}
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)單擊下拉框選擇直接跳轉(zhuǎn)頁面的方法
這篇文章主要介紹了JavaScript實現(xiàn)單擊下拉框選擇直接跳轉(zhuǎn)頁面的方法,涉及javascript控制頁面跳轉(zhuǎn)的相關(guān)技巧,需要的朋友可以參考下2015-07-07
今天小編就為大家分享一篇layui樹形菜單動態(tài)遍歷的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
二維碼作為現(xiàn)代信息傳遞的重要工具,其黑白色調(diào)一直是其標(biāo)志性特征,然而,有時我們可能希望個性化定制二維碼的顏色,以適應(yīng)特定設(shè)計需求或提高可識別性,在這篇文章中,我們將深入探討如何使用Canvas技術(shù)修改二維碼的顏色,為二維碼添加更多創(chuàng)意和個性2023-11-11
移到這里，就會自動點擊...2006-08-08
JavaScript實現(xiàn)與使用發(fā)布/訂閱模式詳解
這篇文章主要介紹了JavaScript實現(xiàn)與使用發(fā)布/訂閱模式,較為詳細(xì)的分析了發(fā)布/訂閱模式的概念、原理并結(jié)合實例形式分析了javascript實現(xiàn)與使用發(fā)布/訂閱模式的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)小米輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了javascript變量聲明,實例分析了javascript變量聲明的相關(guān)使用技巧,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了使用JS實現(xiàn)簡易計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
js表達(dá)式計算器代碼，需要的朋友可以參考下。2011-10-10
程序開發(fā)人員可以使用一些簡單的技術(shù)來改進(jìn)自己的代碼編寫工作。你可以寫一些函數(shù)來處理各種常見任務(wù)，以節(jié)省時間；也可以改進(jìn)一下代碼的實現(xiàn)方式，比如你可以把方法的鏈?zhǔn)秸{(diào)用技術(shù)用到自己所寫的JS庫中，把自己喜歡的方法串起來調(diào)用。2013-03-03