zoukankan      html  css  js  c++  java
  • Taro 小程序 自定义导航栏

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

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

    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 (有兴趣的可以试试)

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

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

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

    接下来自定义 导航栏 Navbar 

     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 // 这里导航栏内容可以自行配置

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

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

     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

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

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

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

  • 相关阅读:
    Read-Copy Update Implementation For Non-Cache-Coherent Systems
    10 华电内部文档搜索系统 search04
    10 华电内部文档搜索系统 search05
    lucene4
    10 华电内部文档搜索系统 search01
    01 lucene基础 北风网项目培训 Lucene实践课程 索引
    01 lucene基础 北风网项目培训 Lucene实践课程 系统架构
    01 lucene基础 北风网项目培训 Lucene实践课程 Lucene概述
    第五章 大数据平台与技术 第13讲 NoSQL数据库
    第五章 大数据平台与技术 第12讲 大数据处理平台Spark
  • 原文地址:https://www.cnblogs.com/vant850/p/10965043.html
Copyright © 2011-2022 走看看