快捷導(dǎo)航

微信小程序自定義導(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();

獲取到全局對(duì)象 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;
}

效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

情人節(jié)專屬純js腳本1k大小的3D玫瑰效果
用代碼做出的玫瑰花，這才是牛逼程序員送給女友的最好情人節(jié)禮物呢
2012-02-02
Js+Ajax,Get和Post在使用上的區(qū)別小結(jié)
下面小編就為大家?guī)硪黄狫s+Ajax,Get和Post在使用上的區(qū)別小結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
小程序瀑布流組件實(shí)現(xiàn)翻頁與圖片懶加載
這篇文章主要介紹了小程序瀑布流組件實(shí)現(xiàn)翻頁與圖片懶加載，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
基于JavaScript實(shí)現(xiàn)一定時(shí)間后去執(zhí)行一個(gè)函數(shù)
在實(shí)際需要中可能需要規(guī)定在指定的時(shí)間之后再去執(zhí)行一個(gè)函數(shù)以達(dá)成期望的目的，這也就是一個(gè)定時(shí)器效果,本文給大家介紹基于JavaScript實(shí)現(xiàn)一定時(shí)間后去執(zhí)行一個(gè)函數(shù)的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
簡(jiǎn)單的JS控制button顏色隨點(diǎn)擊更改的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄?jiǎn)單的JS控制button顏色隨點(diǎn)擊更改的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-04-04
微信小程序網(wǎng)絡(luò)封裝(簡(jiǎn)單高效)
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)封裝(簡(jiǎn)單高效)，微信小程序的網(wǎng)絡(luò)請(qǐng)求很便捷，直接調(diào)用就可以了。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
javascript判斷用戶瀏覽器插件安裝情況的代碼
javascript判斷用戶瀏覽器插件安裝情況的代碼，需要的朋友可以參考下。
2011-01-01
JavaScript中split() 使用方法匯總
本文向大家重點(diǎn)講解一下Javascript中split函數(shù)使用，它可以將一個(gè)字符串分割為子字符串，然后將結(jié)果作為字符串?dāng)?shù)組返回，相信本文介紹你對(duì)split函數(shù)的用法有明確的認(rèn)識(shí)。
2015-04-04
js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁面彈出自定義文字效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁面彈出自定義文字效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
如何使用webpack打包一個(gè)庫library的方法步驟
這篇文章主要介紹了如何使用webpack打包一個(gè)庫library的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12