Taro编译微信小程序实现顶部自定义导航栏

【需求】

使用taro开发微信小程序的过程中，涉及到小程序的需要自定义顶部导航栏（导航栏渐变色），微信小程序中只能够设置固定的颜色，渐变颜色以及添加其他按钮的操作就不能够通过小程序自带的api来实现

【思路】

1. 配置自定义导航栏设置
2. 获取顶部状态栏高度、胶囊按钮高度、以及胶囊到顶部的高度
3. 计算状态栏的高度，并赋值给dom元素
4. 实现icon跳转及组件化

【代码】

1. 配置自定义导航栏设置

pages — demand — index.config.js

export default {
  navigationStyle:'custom', // 设置导航自定义
}

2. 相应高度的获取

在代码中，我们
通过wx.getMenuButtonBoundingClientRect() 来获取胶囊的数据，

通过wx.getSystemInfoSync() 来获取设备系统的数据

 constructor(props){
    super(props)
    this.state={
      navBarHeight:0,
    }
  }
  getNavHeight(){
    let menuButtonObject = wx.getMenuButtonBoundingClientRect(); //获取胶囊对象
    var sysinfo = wx.getSystemInfoSync(); // 获取设备系统对象
    let statusBarHeight = sysinfo.statusBarHeight; // 获取状态栏高度
    let menuBottonHeight =  menuButtonObject.height; //获取胶囊顶部高度
    let menuBottonTop =  menuButtonObject.top; // 获取胶囊距离顶部的高度
    let navBarHeight = statusBarHeight + menuBottonHeight + (menuBottonTop - statusBarHeight) * 2 ; //计算nav导航栏的高度（上图蓝色线段的长度）
    this.setState({ //更新高度数据
      navBarHeight,
    })
  }

计算高度的原理：

3. 计算状态栏的高度，并赋值给dom元素

      <View className='nav_custom_bar' style={{height:` ${this.state.navBarHeight}px`}}>

4.实现icon跳转及组件化

实现跳转

import Taro from '@tarojs/taro';
import { AtIcon }  from 'taro-ui'

...
  goBackPage(){
    Taro.navigateBack({
      delta: 1
    })
  }
...
...
 <AtIcon className={`nav_custom_bar_back ${needBackIcon?'':'hidden'}`} value='chevron-left' size='22' color='#fff' onClick={()=>{this.goBackPage()}}></AtIcon>
...

组件化

完整代码
index.jsx

import Taro from '@tarojs/taro';
import { View, Text , Button} from '@tarojs/components';
import { AtIcon }  from 'taro-ui'
import { Component } from 'react'
import './index.scss'

class NavCustomBar extends Component {

  constructor(props){
    super(props)
    this.state={
      navBarHeight:0,
    }
  }

  componentWillMount () { 
    this.getNavHeight()
  }

  getNavHeight(){
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    console.log('wx.getMenuButtonBoundingClientRect()',menuButtonObject)
    var sysinfo = wx.getSystemInfoSync();
    console.log('wx.getSystemInfoSync()',sysinfo)
    let statusBarHeight = sysinfo.statusBarHeight;
    let menuBottonHeight =  menuButtonObject.height;
    let menuBottonTop =  menuButtonObject.top;
    let navBarHeight = statusBarHeight + menuBottonHeight + (menuBottonTop - statusBarHeight) * 2 ; 
    this.setState({
      navBarHeight,
    })
  }

  goBackPage(){
    Taro.navigateBack({
      delta: 1
    })
  }

  render () {
    let { needBackIcon=true, mainTitle='' } = this.props
    return (
      <View className='nav_custom_bar' style={{height:` ${this.state.navBarHeight}px`}}>
       <AtIcon className={`nav_custom_bar_back ${needBackIcon?'':'hidden'}`} value='chevron-left' size='22' color='#fff' onClick={()=>{this.goBackPage()}}></AtIcon>
       <Text className='nav_custom_bar_title'>{mainTitle}</Text>
       <View></View>
      </View>
    )
  }
}
export default NavCustomBar;

index.scss

.nav_custom_bar{
  width: 100%;
  background: linear-gradient(90deg,#ffa15b, #ff7954);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  flex-shrink: 0;
  .nav_custom_bar_back{
    position: absolute;
    bottom: 20px;
    left: 22px;
    &.hidden{
      display: none;
    }
  }
  .nav_custom_bar_title{
    font-size: 32px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: left;
    color: #f7f7f7;
    margin-bottom: 20px;
  }
}

调用

import DemandDetail from '@/components/DemandDetail/index'
...
 <NavCustomBar
 needBackIcon={true}
 mainTitle={'需求详情'}
 />
 ...