navigationBar相信大家都不陌生把?今天我們就來說說自定義navigationBar,把它改變成我們想要的樣子(搜索框+膠囊、搜索框+返回按鈕+膠囊等)。
window全局配置里有個(gè)參數(shù):navigationStyle(導(dǎo)航欄樣式),default=默認(rèn)樣式,custom=自定義樣式。
"window": { "navigationStyle": "custom" } 復(fù)制代碼
讓我們看看隱藏后的效果:
可以看到原生的navigationBar已經(jīng)消失了,剩下孤零零的膠囊按鈕,膠囊按鈕是無(wú)法隱藏的。
我們用wx.getMenuButtonBoundingClientRect() 【官方文檔】 獲取膠囊按鈕的布局位置信息,坐標(biāo)信息以屏幕左上角為原點(diǎn):
const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); 復(fù)制代碼
width | height | top | right | bottom | left |
---|---|---|---|---|---|
寬度 | 高度 | 上邊界坐標(biāo) | 右邊界坐標(biāo) | 下邊界坐標(biāo) | 左邊界坐標(biāo) |
下面是官方給的示意圖,方便大家理解幾個(gè)坐標(biāo)。
用wx.getSystemInfoSync() 【官方文檔】 獲取系統(tǒng)信息,里面有個(gè)參數(shù):statusBarHeight(狀態(tài)欄高度),是我們后面計(jì)算整個(gè)導(dǎo)航欄的高度需要用到的。
const systemInfo = wx.getSystemInfoSync(); 復(fù)制代碼
我們先要知道導(dǎo)航欄高度是怎么組成的, 計(jì)算公式: 導(dǎo)航欄高度 = 狀態(tài)欄到膠囊的間距(膠囊距上距離-狀態(tài)欄高度) * 2 + 膠囊高度 + 狀態(tài)欄高度 。
自定義導(dǎo)航欄會(huì)應(yīng)用到多個(gè)、甚至全部頁(yè)面,所以封裝成組件,方便調(diào)用;下面是我寫的一個(gè)簡(jiǎn)單例子:
app.js
App({ onLaunch: function(options) { const that = this; // 獲取系統(tǒng)信息 const systemInfo = wx.getSystemInfoSync(); // 膠囊按鈕位置信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 導(dǎo)航欄高度 = 狀態(tài)欄到膠囊的間距(膠囊距上距離-狀態(tài)欄高度) * 2 + 膠囊高度 + 狀態(tài)欄高度 that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight; that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right; that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight; that.globalData.menuHeight = menuButtonInfo.height; }, // 數(shù)據(jù)都是根據(jù)當(dāng)前機(jī)型進(jìn)行計(jì)算,這樣的方式兼容大部分機(jī)器 globalData: { navBarHeight: 0, // 導(dǎo)航欄高度 menuRight: 0, // 膠囊距右方間距(方保持左、右間距一致) menuBotton: 0, // 膠囊距底部間距(保持底部間距一致) menuHeight: 0, // 膠囊高度(自定義內(nèi)容可與膠囊高度保證一致) } }) 復(fù)制代碼
app.json
{ "pages": [ "pages/index/index" ], "window": { "navigationStyle": "custom" }, "sitemapLocation": "sitemap.json" } 復(fù)制代碼
下面為組件代碼: /components/navigation-bar/navigation-bar.wxml
<!-- 自定義頂部欄 --> <view class="nav-bar" style="height:{{navBarHeight}}px;"> <input class="search" placeholder="輸入關(guān)鍵詞!" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input> </view> <!-- 內(nèi)容區(qū)域: 自定義頂部欄用的fixed定位,會(huì)遮蓋到下面內(nèi)容,注意設(shè)置好間距 --> <view class="content" style="margin-top:{{navBarHeight}}px;"></view> 復(fù)制代碼
/components/navigation-bar/navigation-bar.json
{ "component": true } 復(fù)制代碼
/components/navigation-bar/navigation-bar.js
const app = getApp() Component({ properties: { // defaultData(父頁(yè)面?zhèn)鬟f的數(shù)據(jù)-就是引用組件的頁(yè)面) defaultData: { type: Object, value: { title: "我是默認(rèn)標(biāo)題" }, observer: function(newVal, oldVal) {} } }, data: { navBarHeight: app.globalData.navBarHeight, menuRight: app.globalData.menuRight, menuBotton: app.globalData.menuBotton, menuHeight: app.globalData.menuHeight, }, attached: function() {}, methods: {} }) 復(fù)制代碼
/components/navigation-bar/navigation-bar.wxss
.nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;} .nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;} 復(fù)制代碼
以下是調(diào)用頁(yè)面的代碼,也就是引用組件的頁(yè)面: /pages/index/index.wxml
<navigation-bar default-data="{{defaultData}}"></navigation-bar> 復(fù)制代碼
/pages/index/index.json
{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar" } } 復(fù)制代碼
/pages/index/index.js
const app = getApp(); Page({ data: { // 組件參數(shù)設(shè)置,傳遞到組件 defaultData: { title: "我的主頁(yè)", // 導(dǎo)航欄標(biāo)題 } }, onLoad() { console.log(this.data.height) } }) 復(fù)制代碼
效果圖:
好了,以上就是全部代碼了,大家可以文中復(fù)制代碼,也可以 【下載源碼】,直接到開發(fā)者工具里運(yùn)行,記得appid用自己的或者測(cè)試哦!
下面附幾張其它小程序的效果圖,大家也可以嘗試照著做:
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)