前言
員工經過長期磨合與沉淀,具備了協作精神,得以通過團隊的力量開發出優質的產品。成都創新互聯公司堅持“專注、創新、易用”的產品理念,因為“專注所以專業、創新互聯網站所以易用所以簡單”。公司專注于為企業提供網站制作、網站建設、微信公眾號開發、電商網站開發,成都微信小程序,軟件專業公司等一站式互聯網企業服務。本文主要給大家介紹了關于微信小程序自定義導航的相關內容,詳細代碼請見github,請點擊地址 (本地下載),其中有原生小程序的實現,也有wepy版本的實現
了解小程序默認導航
如上圖所示,微信導航分為兩部分,第一個部分為statusBarHeight,劉海屏手機(iPhone X,小米8等)會比其他的手機高很多,第二部分為titleBarHeight,安卓和IOS的高度不同,但是IOS高度是一樣的,IOS高度是一樣的,
所以我們要實現一個兼容不同手機的導航必須要根據不同的手機實現statusBarHeight和titleBarHeight
第一步:全局設置
把app.json中的window中的navigationStyle設置為custom,官方文檔鏈接
設置完之后發現導航欄變成了如下圖所示,只剩下了右上角膠囊按鈕
第二步:確定導航欄兩部分的高度
(1)確定第一部分statusBarHeight的高度,這部分是手機用來展示時間,信號和手機電量的,我們可以從wx.getSystemInfo從獲得
wx.getSystemInfo({ success: function(res) { console.log(res.statusBarHeight) } })
網站題目:微信小程序自定義導航教程(兼容各種手機)-創新互聯
URL地址:http://vcdvsql.cn/article26/djpdcg.html
成都網站建設公司_創新互聯,為您提供網站導航、微信小程序、企業建站、營銷型網站建設、品牌網站制作、小程序開發
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯