在小程序中，有的页面需求可能须要咱们作一个自定义的导航栏， 今天就来踩一踩坑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 便可