在小程序中，有的頁面需求可能須要咱們作一個自定義的導航欄， 今天就來踩一踩坑css
首先須要在app.js 中給全局的導航欄隱藏，redux
1 // app.js 2 3 window: { 4 navigationStyle: 'custom', 5 }, 6 // navigationStyle 接受兩個參數 ['default', 'custom']: ['系統導航欄， 默認值', '隱藏系統導航欄']
這裏隱藏掉默認的導航欄以後 能夠經過自定義組件的形式，DIY 一個導航欄， 值得注意的是， 當隱藏系統導航欄後， 頁面會直接頂到狀態欄上， 不一樣機型的狀高度可能不一致， 尤爲是針對 蘋果X 的劉海屏等 水滴屏， 須要作適配，小程序
解決方法： Taro.getSystemInfo 中 有個屬性叫作 statusBarHeight ， 經過此方法便可獲取手機狀態欄的高度， 也能夠在 未隱藏系統導航欄時 經過 getSystemInfo 中的 可視區域高度 screenHeight - 窗口高度 windowHeight - 狀態欄高度 statusBarHeight 的差值結果得出 系統導航欄的高度， 這裏我經過僅拿蘋果手機的不一樣機型進行測試得出 系統導航欄高度爲 44px ， 便直接把 自定義導航的高度定爲 44px （有興趣的能夠試試）app
還有知道主要一點的是 隱藏系統導航欄後 右上角膠囊狀的按鈕 仍是後保留在原始位置的測試
1 // app.js 2 3 Taro.getSystemInfo({}) 4 .then(res => { 5 Taro.$navBarMarginTop = res.statusBarHeight || 0 6 }) 7 // 將狀態欄高度掛載全局
這裏的寫法不少 能夠申明在 app.js 中， 也能夠放在 redux中 等等 , spa
接下來自定義 導航欄 Navbar code
1 // src/components/Navbar/index 2 3 import Taro from '@tarojs/taro' 4 import { View } from '@tarojs/components' 5 import './index.scss' 6 class Navbar extends Taro.Component { 7 8 render() { 9 const style = { 10 paddingTop: Taro.$navBarMarginTop + 'px' 11 } 12 // 將狀態欄的區域空餘出來 13 return ( 14 <View className='navbarWrap' style={style}> 15 <View className='navbar'>自定義導航欄</View> 16 </View> 17 ); 18 } 19 } 20 export default Navbar 21 22 // 這裏導航欄內容能夠自行配置
而後就是在頁面中使用 自定義導航欄component
頁面中使用方法有兩種， 一種是常規的import 組件， taro 中給咱們提供了第二種方式blog
1 // index/index.js 首頁 2 3 import NavBar from '../../components/Navbar/index' 4 5 class Index extends Component { 6 config = { 7 navigationBarTitleText: '首頁', 8 usingComponents: { 9 'navbar': '../../components/Navbar/index', // 書寫第三方組件的相對路徑 10 }, 11 } 12 render () { 13 return ( 14 <View className='index'> 15 <NavBar /> 16 { /* 方法一 */ } 17 <navbar /> 18 { /* 方法一二 */ } 19 20 </View> 21 ) 22 } 23 } 24 25 export default Index
所幸的是方法二中一樣支持 懶人路徑寫法， 具體工做中可自行選擇本身喜歡的寫法 這裏就不作演示，ip
若是在開發中遇到了 jsEnginScriptError Component is not found in path 相似的報錯，請首先肯定本身路徑的是否正確引用以及大小寫是否有問題，
沒問題的話 ， 從新 yarn dev:weapp 便可