微信小程序 (vue+uniapp)--自定义导航栏头部、滑动渐变（仿小米小程序首页）

---

前言

提示：一个小功能大致的逻辑：
1、自定义顶部导航栏：
（1）、随着需求不断的变化，小程序原生导航栏头部已不满足现有需求
（2）、通过uniapp的uni.getSystemInfoSync、uni.getMenuButtonBoundingClientRect,获取 手机系统的信息、小程序胶囊位置信息，从而适配不同手机的尺寸
（3）、顶部导航栏由状态栏大小 + 小程序胶囊大小 + 胶囊距离状态栏高度 + 胶囊底部高度 = 总的高度
2、功能渐变效果：
（1）、顶部背景颜色根据滑动的位置渐变，用css属性background: rgba()
（2）、搜索框宽度，计算的宽度 + 滑动距离的宽度
（3）、logo图标随着滑动距离的大小渐变

一、效果（小米小程序）

二、我仿的效果

三、代码逻辑

nav.vue

<template>
  <view>
    <view class="top_navbar">
      <view class='top_pos' :style="'height:' + totalHeight + 'px;'"></view>
      <view class="navbar-fixed" :style="navStyle">
        <view :style="'height:' + statusBarHeight + 'px;'"></view>
        <view class="navbar-content" :style="'height:' + navBarHeight + 'px;'+'width:'+windowWidth+'px;'">
          <image src="https://uviewui.com/common/logo.png" class="top_icon" :style="'opacity:'+imgOpacity"></image>
          <view :style="'width:'+navInpWid+'px;'" :class="[navOpacity >= 1 ?'nav_input nav_inp_ac':'nav_input']">
            <u-icon name="search" class="find-icon"></u-icon>
            <span>选择商品</span>
          </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: 500p