微信小程序自定義狀態(tài)欄
本文實(shí)例為大家分享了微信小程序自定義狀態(tài)欄的具體代碼，供大家參考，具體內(nèi)容如下
首先我們需要在json文件中修改一下配置。如果我們只需要在一個(gè)頁(yè)面使用自定義狀態(tài)欄，我們可以在這個(gè)頁(yè)面的json文件中修改；如果所有頁(yè)面都需要使用，我們直接在app.json中修改。
"navigationStyle": "custom",
wxml：
<view class="bgcItem" style="height:{{sumHeight}};">
? ? <view class="head" style="height:{{headHeight}};top:{{headTop}}">
? ? ? <image src="../../static/image/adress.png"></image>
? ? ? <view>{{appname}}</view>
? ? </view>
</view>wxss：
.bgcItem{
? top: 0rpx;
? background-color: #fff;
? position: fixed;
? width: 100%;
? z-index: 999;
}
.head{
? display: flex;
? justify-content: flex-start;
? align-items: center;
? width: 100%;
? height: 130rpx;
? text-align: center;
? position: fixed;
? top: 0rpx;
? left: 0;
? z-index: 999;
? background-color: #fff;
}
?
.head>image {
? width: 24rpx;
? height: 24rpx;
? margin-left: 30rpx;
}
?
.head>view {
? font-size: 28rpx;
? color: #1a1a1a;
? margin-left: 8rpx;
? height: 100%;
? display: flex;
? justify-content: flex-start;
? align-items: center;
}wx.getSystemInfo是獲取系統(tǒng)信息的API
wx.getSystemInfo({
? ? success(res) {
? ? ? // res是設(shè)備信息
? ? ? // menuButton是右邊膠囊按鈕的信息
? ? ? let menuButton = wx.getMenuButtonBoundingClientRect()
? ? ? let titleBarHeight = (menuButton.top - res.statusBarHeight) * 2 + menuButton.height?
? ? ? this.setData({
? ? ? headHeight: titleBarHeight * 2 + 'rpx',
? ? ? headTop: res.statusBarHeight * 2 + 'rpx',
? ? ? sumHeight: titleBarHeight * 2 + res.statusBarHeight * 2 + 'rpx'
? ? ? ?})
? ? ?}
? })
圖片中的(1)是menuButton.top
圖片中的(2)是res.statusBarHeight
那我們求(3)怎么算呢? 是不是(1) - (2)呢?
即menuButton.top - res.statusBarHeight；那為什么乘2呢？ 是不是膠囊按鈕下面還有一段距離， 也就是和(3)相等的距離，所以乘2。
既然我們把(3)求出來了，那我們想得到什么值就得到什么值了。
比如求整體的高度就是：(menuButton.top - res.statusBarHeight) * 2 + menuButton.height + res.statusBarHeight。
我們也可以把上面的代碼寫在app.js的onLaunch函數(shù)中
// 當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次）
?onLaunch: function () {
? ?wx.getSystemInfo({
? ? ?success(res) {
? ? ? ?// res是設(shè)備信息
? ? ? ?// menuButton是右邊膠囊按鈕的信息
? ? ? ?let menuButton = wx.getMenuButtonBoundingClientRect()
? ? ? ?let titleBarHeight = (menuButton.top - res.statusBarHeight) * 2 + menuButton.height?
? ? ? ?+ res.statusBarHeight
? ? ? ?this.globalData.titleBarHeight = titleBarHeight
? ? ? }
? ? })
? },我們可以將計(jì)算好的值存在globalData中，globalData是在app.js中定義。
我們?cè)谛〕绦虺跏蓟臅r(shí)候計(jì)算好，并且將值也存在了globalData中，在其他頁(yè)面使用的時(shí)候我們可以直接寫
var App = getApp();
onLoad: function (options) {
? ? this.setData({
? ? ? titleBarHeight: App.globalData.titleBarHeight
? ? })
?},那么titleBarHeight就是我們計(jì)算好的值，我們可以直接使用了。
還有一種不需要使用自定義狀態(tài)欄的，我們只想修改狀態(tài)欄的顏色，那這個(gè)是很簡(jiǎn)單的。我們可以直接在json里寫上
"navigationBarTitleText": "首頁(yè)", "navigationBarTextStyle": "white", "navigationBarBackgroundColor": "#ff00ff"
效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)抖音羅盤時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)抖音羅盤時(shí)鐘，特別實(shí)用的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
JavaScript是一門非常流行的編程語(yǔ)言，許多開發(fā)者都會(huì)把JavaScript選為入門語(yǔ)言，本文給大家分享javascript七大技巧(一)，對(duì)javascript技巧相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
本文重點(diǎn)給大家介紹IONIC自定義subheader的最佳解決方案，本文實(shí)例講解，介紹的非常詳細(xì)，感興趣的朋友一起看看吧2016-09-09
在JavaScript中，undefined和null是兩個(gè)特殊的值，用于表示缺失或空值，文章通過代碼示例詳細(xì)介紹undefined與null作用及使用方法，感興趣的同學(xué)可以借鑒一下2023-05-05
js將當(dāng)前時(shí)間格式化為 年-月-日 時(shí):分:秒的實(shí)現(xiàn)代碼
這篇文章主要介紹了js將當(dāng)前時(shí)間格式化為 年-月-日 時(shí):分:秒主要是使用js的Date()對(duì)象，將系統(tǒng)當(dāng)前時(shí)間格式化為年-月-日 時(shí):分:秒，需要的朋友可以參考下2018-01-01
關(guān)于scrollLeft,scrollTop的瀏覽器兼容性測(cè)試
彈窗在谷歌瀏覽器chrome下的位置跟在別的瀏覽器下不一樣，接下來介紹下scrollLeft,scrollTop的瀏覽器兼容性，感興趣的你可以參考下哈2013-03-03
這篇文章主要為大家詳細(xì)介紹了通過filereader接口讀取文件，使用readAsDataURL方法預(yù)覽圖片的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
JavaScript & jQuery完美判斷圖片是否加載完畢
本文主要介紹了JavaScript & jQuery完美判斷圖片是否加載完畢的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了2個(gè)簡(jiǎn)單js倒計(jì)時(shí)方式，一是帶天數(shù)的倒計(jì)時(shí)，二是單純分鐘和秒倒計(jì)時(shí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
JS代碼判斷IE6,IE7,IE8,IE9的函數(shù)代碼
JS代碼判斷瀏覽器版本,支持IE6,IE7,IE8,IE9！做網(wǎng)頁(yè)有時(shí)候會(huì)用到JS檢測(cè)IE的版本，下面是檢測(cè)Microsoft Internet Explorer版本的三種代碼2013-08-08