上一期我們了解了 小程序底部導航欄 的實現(xiàn)效果，今天一起來了解下如何設置小程序標題欄～
基礎標題欄
小程序標題欄主要包含返回、標題、收藏、菜單、收起 5 個模塊，其中能夠調(diào)整的部分只有標題和背景色。
另外 IDE上無法展示收藏按鈕，如果測試收藏按鈕的相關功能 需要使用真機模式調(diào)試。
1、基礎屬性
?? 我們可以在 app.json 中標題欄的基礎屬性進行設置，常用的屬性如下：
- defaultTitle ：頁面標題
- titleBarColor ：導航欄背景色
- titleImage ：圖片標題
app.json（對所有頁面生效）
這里分別舉例說明「文字標題」和「圖片標題」對應的效果：
"window": {
"defaultTitle": "購物商城",
"titleBarColor":"#ff4343",
"titleImage":"https://img2.baidu.com/it/u=417873769,1232851485&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
},
文字標題效果：
圖片標題效果：
? 注意：
- titleImage 優(yōu)先級 > defaultTitle
- 如果在頁面的 json 文件中配置，僅對當前頁面生效
- 頁面配置優(yōu)先級 > app.json
- 當前頁面導航欄背景色無設置的情況下會沿用上級頁面的配置
關于導航欄標題配置可能遇到的問題可以參考下面的文檔：
2、動態(tài)樣式修改
如果需要對標題的樣式進行動態(tài)修改，可以通過 my.setNavigationBar 方法實現(xiàn)：
// 設置導航欄前景色。注：frontColor 需要和 backgroundColor 一起設置
my.setNavigationBar({
frontColor: '#ffffff',
backgroundColor: '#ff0000',
})
// 設置導航欄標題
my.setNavigationBar({
title: '當前標題'
})
// 重置導航欄顏色為默認配色
my.setNavigationBar({
reset: true
})
另外，要注意的是，如果跳轉到非 tab /首頁的情況且頁面棧深度為 1，頁面上會出現(xiàn) home 圖標，如下圖：
此時我們可以使用 my.hideBackHome 方法進行隱藏
Page({
onShow() {
if(getCurrentPages().length == 1){//判斷頁面棧深度
my.hideBackHome();
}
},
});
?? 小貼士：
- 建議在頁面 onShow 時調(diào)用該方法，避免有閃爍或不生效。
- 除了 home 圖標外，其他的按鈕都無法隱藏/去除。
這邊匯總了一些關于動態(tài)樣式修改的問題：
自定義標題欄
因為基礎標題很多的屬性都無法修改，如果需要標題居中、設置搜索框等操作的話，就需要用到自定義標題欄了。
1、屬性配置
首先，自定義標題欄需要在對應頁面的 .json 文件中配置以下屬性：
- transparentTitle：標題欄透明設置，支持設置 none / always / auto
- titlePenetrate：是否允許標題欄點擊穿透點擊后方元素
"window": {
"defaultTitle": "購物商城",
"transparentTitle":"always",
"titlePenetrate":"YES"
}
none 效果：
always 效果：
auto 效果：向下拉時會逐漸透明
2、編寫自定義標題欄代碼
透明設置完成后，為了不跟返回按鈕以及膠囊的位置沖突，我們需要獲取到對應的位置信息，根據(jù)位置來確定自定義的模塊的位置。
主要是獲取標題欄（titleBarHeight）、狀態(tài)欄（statusBarHeight）以及返回按鈕右邊的距離（right）。
獲取標題欄位置：
Page({
data: {
titleBarHeight: 0,//標題欄高度
statusBarHeight: 0,//狀態(tài)欄高度
right: 0,//返回按鈕右邊距離
},
onLoad(options) {
const {
titleBarHeight,
statusBarHeight,
} = my.getSystemInfoSync();
this.setData({
titleBarHeight,
statusBarHeight,
});
const{
backButtonIcon,
} = my.getLeftButtonsBoundingClientRect();
this.setData({
right:backButtonIcon.right
});
},
//點擊手機標題欄觸發(fā)的事件,需要在 index.json 配置 titlePenetrate:"YES"
onTitleBar(e) {
my.alert({
title: '點擊了標題欄'
});
}
});
在 style 中設置自定義標題欄高度：
需要注意的是，只能在 style 進行動態(tài)配置，.css文件不支持動態(tài)配置。
<view class="custom-nav" style="height:{{titleBarHeight + statusBarHeight}}px">
<view class="custom-titleBar"
style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px;padding-left:{{right}}px"
onTap="onTitleBar" >
hi，我是自定義標題~
</view>
</view>
.acss 代碼：
.custom-nav {
background-image: linear-gradient(to bottom, #BC3985, #D15B2C);
}
.custom-titleBar {
display: flex;
align-items: center;
color: white;
font-size: 16px;
margin-left: 16px;
}
實現(xiàn)效果：
自定義導航欄的常見問題匯總在這里了，大家可以參考下~：
以上就是關于【小程序標題欄設置】的所有內(nèi)容了，希望對你有所幫助★,°:.☆(￣▽￣)/$:.°★ 。
