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={'需求详情'}/>...

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

【微信小程序】顶部标题导航栏模板
以下是我自己写的一个标题导航栏模板,较为简陋,需要什么属性可自行添加. HTML部分 <template><div class="comp-navbar"> ...
微信小程序——不同角色的导航栏显示不同
文章目录问题描述解决方法代码实现底部导航栏排查员存在的问题问题描述微信小程序的原生底部导航栏限制了数量(3-5个)且不能根据你的不用用户进行动态的底部导航栏变化,无法适应多种用户从 ...
微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
微信小程序实现左侧滑动导航栏
微信小程序实现左侧滑动导航栏 1.左侧滑动导航栏图如下 2.这是我们左侧滚动栏的代码 wxml <view class='under_line'></view><view ...
微信小程序实现透明渐变导航栏
最近在微信小程序实现透明渐变的导航栏,刚好有接触wxs,所以尝试着用wxs实现.核心代码: <scroll-view scroll-y style="height: {{pageHei ...
微信小程序购物车和左侧导航栏
先上实现图话不多说,直接上代码 cars.js // const arr = require("../../utils/data"); // pages/cars/cars.j ...
初尝微信小程序2-Swiper组件、导航栏标题配置
swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...
微信小程序兼容ios底部导航栏边距
css代码 padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
vue仿今日头条_微信小程序仿今日头条导航栏滚动解析
项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再weui里面看到了类似的例子地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll- ...