vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果

⭐️⭐️⭐️  作者：船长在船上
🚩🚩🚩  主页：来访地址船长在船上的博客
🔨🔨🔨  简介：资深前端开发工程师，专注前端开发，欢迎咨询交流，共同学习

🔔🔔🔔   感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。  

vant文档：Vant 2 - Mobile UI Components built on Vue

实现效果： 

 

代码实现：

1.navbar、tabbar顶部导航过渡效果、颜色过渡；

<div class="mallHead">
        <van-nav-bar :title="titleName" fixed @click-left="onClickLeft" :style="style" safe-area-inset-top>
          <template #left>
            <van-icon name="arrow-left" size="22px" color="#024EE0" />
          </template>
        </van-nav-bar>
        <div class="top"></div>
</div>

<div :class="indexTop>220?'menuActive':'dropdown-menu'" >
        <van-dropdown-menu>
          <van-dropdown-item v-model="amountValue" :options="amountOption" />
          <van-dropdown-item v-model="integralValue" :options="integralOption" />
          <van-dropdown-item v-model="goodsValue" :options="goodsOption" />
        </van-dropdown-menu>
</div>

css样式 

.mallHead ::v-deep.van-nav-bar{
  background: none;
  .van-icon-arrow-left{
    color:#fff !important;
  }
  .van-nav-bar__title{
    color:#fff;
  }
}
.mallHead ::v-deep.van-nav-bar::after{
  border: 0;
}

.menuActive{
  box-shadow: none;
  background:#fff;
  width: 100%;
  position: fixed;
  top: 92px;
  left: 0;
  z-index: 1;
}

 2.定义data

data(){
    return {
        style:null,
        indexTop:0,// 滚动条高度
        amountValue:0,
        amountOption:[
            { text: '兑换量从高到底', value: 0 },
            { text: '积分从低到高', value: 1 },
            { text: '积分从高到低', value: 2 },
          ],
        .......
    }
}

3.methods方法定义 

mounted(){
    window.addEventListener('scroll', this.handleScroll,true);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },

定义handleScroll方法

Math.abs(Math.round(this.indexTop)) / 100; 自行定义

handleScroll(){
      this.indexTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 计算出移动位置
      const opacity = Math.abs(Math.round(this.indexTop)) / 100; // 根据位置移动动态设置背景透明度
      this.style = { background: `rgba(253,85,39,${opacity})`};
}

 👉👉👉  欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。