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

【需求】

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

【思路】

配置自定义导航栏设置获取顶部状态栏高度、胶囊按钮高度、以及胶囊到顶部的高度计算状态栏的高度，并赋值给dom元素实现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.propsreturn (<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'...<NavCustomBarneedBackIcon={true}mainTitle={'需求详情'}/>...