微信小程序自定義導航欄

更新時間：2018年12月31日 10:40:52 作者：zhoushenxian

這篇文章主要為大家詳細介紹了微信小程序自定義導航欄，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序自定義導航欄，供大家參考，具體內容如下

在微信小程序中導航欄是可以直接配置的:

目前只支持二種，但是我們的需求可能需要一個其他的顏色等,那么不得不修改這個了,

"window":{
 "navigationStyle": "custom"
},

我就配置了這個屬性,現在來看看我的界面

紅色箭頭指向的是配置后自動生成的,我沒有寫任何代碼，比如我在更多界面導航欄需要自定義,那么在more.js中在onLoad()方法中獲取到全局存儲的導航欄高度,然后高度設置給組件就行了,

app.js:

 /**
 * 當小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）
 */
 onLaunch: function () {
 wx.getSystemInfo({
  success: res => {
  //導航高度
 
  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
 },

默認值是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;
}

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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