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