Taro 小程序 自定义导航栏
在小程序中,有的页面需求可能需要我们做一个自定义的导航栏, 今天就来踩一踩坑
首先需要在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 即可
- Tarojs+redux支付宝小程序开发攻略
- 小程序多端框架全面测评:chameleon、Taro、uni-app、mpvue、WePY
- 微信小程序系列九:自定义导航栏
- taro初探:使用taro构建微信小程序基础教程
- taro开发微信小程序的实践
- 微信小程序自定义导航栏
- 微信小程序第三方框架对比 之 wepy / mpvue / taro
- 基于taro开发的微信小程序代码适配H5
- Taro 1.1 全面支持微信/百度/支付宝小程序了!接下来让小编带你来看看怎样使用它吧?
- 基于windows的Qt程序IDE的配置
- 编译与运行、解释程序与编译程序
- Linux gcc g++ 编译C++程序
- 在程序中用线程技术打开一个非模态对话框
- android 获得监听某一广播的所有程序
- Linux下运行JAVA程序——JRE安装和配置
- 一个播客(podcast)展示对用户程序的攻击
- 通过C#程序调用 Windows 记事本程序 编辑一个
- 查看windows的端口被哪个程序占用了
- 微信小程序_仿淘宝
- 程序员必备利器—Java程序性能分析工具Java VisualVM(Visual GC)