微信小程序 、taro3.x、uniapp 自定义导航栏头部、滑动渐变（仿小米Life小程序首页）

前言

提示：一个小功能大致的逻辑：
1、自定义顶部导航栏：
（1）、随着需求不断的变化，小程序原生导航栏头部已不满足现在的社会的客户了
（2）、顶部导航栏我们可以获取手机系统的信息，完全可以适配其他手机的尺寸Taro.getSystemInfoSync()
（3）、看得出顶部导航栏由状态栏大小 + 小程序胶囊大小 + 胶囊距离状态栏高度 + 胶囊底部高度 = 总的高度，胶囊的信息获取 Taro.getMenuButtonBoundingClientRect()
2、功能渐变效果：
（1）、顶部背景颜色根据滑动的位置了渐变，用背景颜色background: rgba()
（2）、搜索框适配手机，默认原来的宽度 + 滑动距离的剩余的跨度
（3）、logo图标随着话滑动距离的大小渐变

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果（小米小程序）

二 、我仿的效果

三、代码逻辑

1.index.jsx

代码如下（示例）：

import { Component } from 'react'
import { View, Image, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
// import Taro, { Component } from "@tarojs/taro"
// import { AtButton } from 'taro-ui'
import topIcon from '../../assets/images/pay_type0.png'
import './index.less'export default class Index extends Component {constructor(props) {super(props);this.state = {totalHeight: "",	// 总高度statusBarHeight: "",	// 状态栏高度navBarHeight: 45,	// 导航栏高度windowWidth: 375,navStyle: "",navOpacity: 0,navInpWid: "",navRemain: "",widRemain: "",scrollTop: 0,imgOpacity: 1,};}componentWillMount () { const info = Taro.getSystemInfoSync()// 设置状态栏的高度this.state.statusBarHeight = info.statusBarHeightthis.state.windowWidth = info.windowWidth// h5 app mp-alipay// 获取胶囊的位置const menuButtonInfo = Taro.getMenuButtonBoundingClientRect()// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏的高度) = 导航栏的高度this.state.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight) + 4this.state.windowWidth = menuButtonInfo.leftthis.state.widRemain = (info.windowWidth / 375 * 70)this.setState({navInpWid: this.state.windowWidth - this.state.widRemain,navRemain: this.state.windowWidth - this.state.widRemain,totalHeight: this.state.statusBarHeight + this.state.navBarHeight})}onPageScroll(e) {let topHeight = e.scrollTop, navOp = 0navOp = topHeight / this.state.totalHeight;let mobileTop = this.state.navRemainthis.setState({navOpacity: navOp,navInpWid: navOp > 0 ?  mobileTop + (this.state.widRemain * navOp) : this.state.navRemain,imgOpacity: navOp <= 1 ? 1 - navOp : 0})const styles = `background: rgba(255, 255, 255, ${navOp});`this.setState({navStyle: topHeight > 10 ?  styles : ""})}render () {const {totalHeight, navBarHeight, statusBarHeight, windowWidth, navStyle, navOpacity, navInpWid, imgOpacity} = this.statereturn (<View className='index'><View className='top_navbar'><View className='top_pos' style={`height:${totalHeight}px`}></View><View className='navbar-fixed' style={navStyle}><View style={`height:${statusBarHeight}px`}></View>{/* <View style={{height: statusBarHeight+'px'}}></View> <View className='navbar-content' style={{height: navBarHeight+'px', width:windowWidth+'px'}}> */}<View className='navbar-content' style={`height:${navBarHeight}px; width:${windowWidth}px`}><Image style={`opacity:${imgOpacity}`} className='top_icon' src='../../assets/images/pay_type0.png'></Image><View style={`width:${navInpWid}px`} className={navOpacity >= 1 ? 'nav_input nav_inp_ac' :'nav_input'}></View></View></View></View><View style='width: 100%; height: 500px; background: #FE5804'></View><View style='width: 100%; height: 500px; background: pink'></View><View style='width: 100%; height: 500px; background: green'></View><View style='width: 100%; height: 500px; background: red'></View>{/* <AtButton type='primary'>按钮文案</AtButton> */}</View>)}
}

2.index.less

代码如下（示例）：

.top_navbar{.top_pos{width: 100%;position: fixed;top: 0;left: 0;background-color: #FE5804;}.navbar-fixed{position: fixed;top: 0;left: 0;z-index: 100;width: 100%;.navbar-content {display: flex;align-items: center;justify-content: flex-end;height: 45px;padding: 0 20px 0 30px;box-sizing: border-box;position: relative;.top_icon{position: absolute;left: 30px;width: 50px;height: 50px;display: block;z-index: -1;border-radius: 50%;}.nav_input{width: 430px;height: 70px;border-radius: 40px;margin-bottom: 8px;background-color: #fff;}.nav_inp_ac{transition: all ease 0.3s;background-color: #F7F7F7;}.return_icon {width: 54rpx;height: 54rpx;margin-bottom: 4px;display: block;border-radius: 50%;}.return_icon2 {width: 22rpx;height: 38rpx;transform: rotateY(180deg);}}}
}

3.index.config.js

代码如下（示例）：

export default {navigationBarTitleText: '',navigationStyle: 'custom',
}

总结