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

---

前言

提示：一个小功能大致的逻辑：
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.statusBarHeight
    this.state.windowWidth = info.windowWidth
    // h5 app mp-alipay
    // 获取胶囊的位置
    const menuButtonInfo = Taro.getMenuButtonBoundingClientRect()
    // (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏的高度) = 导航栏的高度
    this.state.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight) + 4
    this.state.windowWidth = menuButtonInfo.left
    this.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 = 0
    navOp = topHeight / this.state.totalHeight;
    let mobileTop = this.state.navRemain
    this.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.state
    return (
      <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>
    )
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

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);
			}
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

3.index.config.js

代码如下（示例）：

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

1
2
3
4
5

---

总结

以上就是仿小米的效果内容，本文仅仅简单介绍了**Taro.getSystemInfoSync()** 的使用来适配，使用**Taro.getMenuButtonBoundingClientRect()** 等等api，逻辑并不是难