Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

Taro 小程序 自定义导航栏

vanst 2019-06-02 15:18:00 阅读数:441 评论数:0 点赞数:0 收藏数:0

在小程序中,有的页面需求可能需要我们做一个自定义的导航栏, 今天就来踩一踩坑

首先需要在app.js 中给全局的导航栏隐藏,

 // app.js
 
 window: {
    navigationStyle: 'custom',
 },
 //  navigationStyle 接受两个参数 ['default', 'custom']: ['系统导航栏, 默认值', '隐藏系统导航栏']

这里隐藏掉默认的导航栏之后 可以通过自定义组件的形式,DIY 一个导航栏, 值得注意的是, 当隐藏系统导航栏后, 页面会直接顶到状态栏上, 不同机型的状高度可能不一致, 尤其是针对 苹果X 的刘海屏等 水滴屏, 需要做适配,

解决方法:  Taro.getSystemInfo  中 有个属性叫做  statusBarHeight , 通过此方法即可获取手机状态栏的高度, 也可以在 未隐藏系统导航栏时 通过  getSystemInfo  中的  可视区域高度  screenHeight  - 窗口高度  windowHeight - 状态栏高度  statusBarHeight 的差值结果得出 系统导航栏的高度, 这里我通过仅拿苹果手机的不同机型进行测试得出 系统导航栏高度为 44px , 便直接把 自定义导航的高度定为 44px (有兴趣的可以试试)

还有知道主要一点的是 隐藏系统导航栏后 右上角胶囊状的按钮  还是后保留在原始位置的

 // app.js
 
 Taro.getSystemInfo({})
   .then(res  => {
      Taro.$navBarMarginTop =  res.statusBarHeight || 0
   })
 // 将状态栏高度挂载全局

这里的写法很多 可以申明在 app.js 中, 也可以放在 redux中 等等 , 

接下来自定义 导航栏 Navbar 

 

 // src/components/Navbar/index
 
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 import './index.scss'
 class Navbar extends Taro.Component {
 
   render() {
     const style = {
       paddingTop: Taro.$navBarMarginTop + 'px'
     }
     // 将状态栏的区域空余出来
     return (
       <View className='navbarWrap' style={style}>
         <View className='navbar'>自定义导航栏</View>
       </View>
     );
   }
 }
 export default Navbar
 
 // 这里导航栏内容可以自行配置

 

然后就是在页面中使用 自定义导航栏

页面中使用方法有两种, 一种是常规的import 组件, taro 中给我们提供了第二种方式

 // index/index.js  首页
 
 import NavBar from '../../components/Navbar/index'
 
 class Index extends Component {
   config = {
     navigationBarTitleText: '首页',
     usingComponents: {
       'navbar': '../../components/Navbar/index', // 书写第三方组件的相对路径
     },
   }
     render () {
     return (
       <View className='index'>
         <NavBar />
         { /* 方法一 */  }
         <navbar />
         { /* 方法一二 */  }
 
       </View>
     )
   }
 }
 
 export default Index

所幸的是方法二中同样支持 懒人路径写法, 具体工作中可自行选择自己喜欢的写法 这里就不做演示,

 

如果在开发中遇到了  jsEnginScriptError Component is not found in path   类似的报错,请首先确定自己路径的是否正确引用以及大小写是否有问题,

没问题的话 , 重新 yarn dev:weapp  即可

 

版权声明
本文为[vanst]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/vant850/p/10965043.html