微信小程序 (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: 500px; background: green'></view>
    <view style='width: 100%; height: 500px; background: red'></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalHeight: '', // 总高度
      statusBarHeight: '', // 状态栏高度
      navBarHeight: 45, // 导航栏高度
      windowWidth: 375,
      navStyle: '',
      navOpacity: 0,
      navInpWid: '',
      navRemain: '',
      widRemain: '',
      scrollTop: 0,
      imgOpacity: 1,
      logo_block_width: 0,
    };
  },
  mounted() {
    // #ifdef  MP-WEIXIN
    this.nav();
    // #endif
  },
  methods: {
    nav() {
      let info = uni.getSystemInfoSync();
      console.log(info);
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      console.log(menuButtonInfo);
      this.statusBarHeight = info.statusBarHeight;
      this.windowWidth = info.windowWidth;
      this.navBarHeight =
        menuButtonInfo.bottom -
        info.statusBarHeight +
        (menuButtonInfo.top - info.statusBarHeight) +
        4;
      this.windowWidth = menuButtonInfo.left;
      this.widRemain = (info.windowWidth / 375) * 70;
      // this.navInpWid = this.windowWidth - this.widRemain;
      this.navInpWid = menuButtonInfo.left - 70;
      console.log('navInpWid:...', this.navInpWid);
      this.navRemain = this.windowWidth - this.widRemain;
      console.log('navRemain:....................', this.navRemain);
      this.totalHeight = this.statusBarHeight + this.navBarHeight;
      console.log('totalHeight:...', this.totalHeight);
      this.logo_block_width = this.windowWidth - this.navInpWid - 10;
    },
    onPageScroll(e) {
      let topHeight = e.scrollTop;
      let navOp = 0;
      navOp = topHeight / this.totalHeight;
      console.log('navOp:...', navOp);
      let mobileTop = this.navRemain;
      this.navOpacity = navOp;
      this.navInpWid =
        navOp > 0 ? mobileTop + this.widRemain * navOp : this.navRemain;
      this.logo_block_width = this.windowWidth - this.navInpWid - 10;
      console.log('scroll:...', this.navInpWid);
      this.imgOpacity = navOp <= 1 ? 1 - navOp : 0;
      const styles = `
      background: rgba(255, 255, 255, ${navOp});
      `;
      this.navStyle = topHeight > 10 ? styles : '';
    },
  },
};
</script>

<style lang="scss" scoped>
.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 10px 0 10px;
      box-sizing: border-box;
      position: relative;
      // background: yellowgreen;
      .top_icon {
        position: absolute;
        left: 30rpx;
        // transform: translateX(-50%);
        width: 40px;
        height: 40px;
        display: block;
        opacity: 0;
        border-radius: 50%;
        // background: gray;
      }
      .logo-block {
        position: relative;
        background: violet;
        // width: 50px;
        height: 40px;
        .top_icon {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          width: 40px;
          height: 40px;
          display: block;
          opacity: 0;
          border-radius: 50%;
          // background: gray;
        }
      }
      .nav_input {
        width: 430px;
        height: 43px;
        line-height: 43px;
        border-radius: 40px;
        background-color: #fff;
        position: relative;
        padding-left: 15px;
        color: gray;
        .find-icon {
          color: gray;
          padding-right: 10px;
        }
      }
      .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);
      }
    }
  }
}
</style>

总结

以上就是仿微信小程序小米商城的效果内容