微信小程序自定義狀態(tài)欄
本文實例為大家分享了微信小程序自定義狀態(tài)欄的具體代碼，供大家參考，具體內(nèi)容如下
首先我們需要在json文件中修改一下配置。如果我們只需要在一個頁面使用自定義狀態(tài)欄，我們可以在這個頁面的json文件中修改；如果所有頁面都需要使用，我們直接在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)小程序初始化完成時，會觸發(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
? ? ? }
? ? })
? },我們可以將計算好的值存在globalData中，globalData是在app.js中定義。
我們在小程序初始化的時候計算好，并且將值也存在了globalData中，在其他頁面使用的時候我們可以直接寫
var App = getApp();
onLoad: function (options) {
? ? this.setData({
? ? ? titleBarHeight: App.globalData.titleBarHeight
? ? })
?},那么titleBarHeight就是我們計算好的值，我們可以直接使用了。
還有一種不需要使用自定義狀態(tài)欄的，我們只想修改狀態(tài)欄的顏色，那這個是很簡單的。我們可以直接在json里寫上
"navigationBarTitleText": "首頁", "navigationBarTextStyle": "white", "navigationBarBackgroundColor": "#ff00ff"
效果
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)抖音羅盤時鐘，特別實用的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
JavaScript是一門非常流行的編程語言，許多開發(fā)者都會把JavaScript選為入門語言，本文給大家分享javascript七大技巧(一)，對javascript技巧相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
本文重點給大家介紹IONIC自定義subheader的最佳解決方案，本文實例講解，介紹的非常詳細(xì)，感興趣的朋友一起看看吧2016-09-09
在JavaScript中，undefined和null是兩個特殊的值，用于表示缺失或空值，文章通過代碼示例詳細(xì)介紹undefined與null作用及使用方法，感興趣的同學(xué)可以借鑒一下2023-05-05
js將當(dāng)前時間格式化為 年-月-日 時:分:秒的實現(xiàn)代碼
這篇文章主要介紹了js將當(dāng)前時間格式化為 年-月-日 時:分:秒主要是使用js的Date()對象，將系統(tǒng)當(dāng)前時間格式化為年-月-日 時:分:秒，需要的朋友可以參考下2018-01-01
關(guān)于scrollLeft,scrollTop的瀏覽器兼容性測試
彈窗在谷歌瀏覽器chrome下的位置跟在別的瀏覽器下不一樣，接下來介紹下scrollLeft,scrollTop的瀏覽器兼容性，感興趣的你可以參考下哈2013-03-03
這篇文章主要為大家詳細(xì)介紹了通過filereader接口讀取文件，使用readAsDataURL方法預(yù)覽圖片的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
JavaScript & jQuery完美判斷圖片是否加載完畢
本文主要介紹了JavaScript & jQuery完美判斷圖片是否加載完畢的方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了2個簡單js倒計時方式，一是帶天數(shù)的倒計時，二是單純分鐘和秒倒計時，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
JS代碼判斷IE6,IE7,IE8,IE9的函數(shù)代碼
JS代碼判斷瀏覽器版本,支持IE6,IE7,IE8,IE9！做網(wǎng)頁有時候會用到JS檢測IE的版本，下面是檢測Microsoft Internet Explorer版本的三種代碼2013-08-08