微信小程序自定義狀態(tài)欄
本文實(shí)例為大家分享了微信小程序自定義狀態(tài)欄的具體代碼，供大家參考，具體內(nèi)容如下
首先我們需要在json文件中修改一下配置。如果我們只需要在一個(gè)頁面使用自定義狀態(tài)欄，我們可以在這個(gè)頁面的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)小程序初始化完成時(shí)，會觸發(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中定義。
我們在小程序初始化的時(shí)候計(jì)算好，并且將值也存在了globalData中，在其他頁面使用的時(shí)候我們可以直接寫
var App = getApp();
onLoad: function (options) {
? ? this.setData({
? ? ? titleBarHeight: App.globalData.titleBarHeight
? ? })
?},那么titleBarHeight就是我們計(jì)算好的值，我們可以直接使用了。
還有一種不需要使用自定義狀態(tài)欄的，我們只想修改狀態(tài)欄的顏色，那這個(gè)是很簡單的。我們可以直接在json里寫上
"navigationBarTitleText": "首頁", "navigationBarTextStyle": "white", "navigationBarBackgroundColor": "#ff00ff"
效果
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序scroll-view橫向滑動嵌套for循環(huán)的示例代碼
這篇文章主要介紹了微信小程序scroll-view橫向滑動嵌套for循環(huán)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
JS中style.display和style.visibility的區(qū)別實(shí)例說明
下面的例子說明了這種區(qū)別：在這個(gè)例子中，divContent1和divContent2隱藏的時(shí)候用的是style.display=none，這時(shí)候，后面的div會向上移動，占據(jù)已經(jīng)隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來隱藏，但是其隱藏后仍然占據(jù)原來的空間2013-03-03
JavaScript將base64圖片轉(zhuǎn)換成formData并通過AJAX提交的實(shí)現(xiàn)方法
本文通過三步驟給大家詳細(xì)介紹了JavaScript將base64圖片轉(zhuǎn)換成formData并通過AJAX提交的實(shí)現(xiàn)方法，感興趣的朋友一起看看吧2016-10-10
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)輪播圖效果的3種簡單方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
全角：是一種電腦字符，是指一個(gè)全角字符占用兩個(gè)標(biāo)準(zhǔn)字符(或兩個(gè)半角字符)的位置。全角占兩個(gè)字節(jié)。半角：是指一個(gè)字符占用一個(gè)標(biāo)準(zhǔn)的字符位置。半角占一個(gè)字節(jié)。接下來通過本文給大家介紹JS驗(yàn)證全角與半角及相互轉(zhuǎn)化的知識，需要的朋友參考下吧2017-05-05
這篇文章主要介紹了動態(tài)加載js文件的方法,結(jié)合實(shí)例形式簡單分析了JavaScript動態(tài)加載的實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-04-04
Iphone手機(jī)、安卓手機(jī)瀏覽器控制默認(rèn)縮放大小的方法總結(jié)（附代碼）
這篇文章主要介紹了Iphone手機(jī)、安卓手機(jī)瀏覽器控制默認(rèn)縮放大小的方法，通過meta標(biāo)簽中添加屬性代碼展示控制瀏覽器的默認(rèn)縮放，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
微信小程序使用uni-app開發(fā)小程序及部分功能實(shí)現(xiàn)詳解
uni-app是一個(gè)使用Vue.js 開發(fā)所有前端應(yīng)用的框架,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用uni-app開發(fā)小程序及部分功能實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
原生js實(shí)現(xiàn)新聞列表展開/收起全文功能
本文主要介紹了原生js實(shí)現(xiàn)新聞列表展開/收起全文功能的知識要點(diǎn)、注意事項(xiàng)以及完整代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JavaScript獲取兩個(gè)數(shù)組交集的方法
這篇文章主要介紹了JavaScript獲取兩個(gè)數(shù)組交集的方法,涉及javascript針對數(shù)組的相關(guān)操作技巧,需要的朋友可以參考下2015-06-06