vue?navbar?tabbar導(dǎo)航條根據(jù)位置移動實現(xiàn)定位、顏色過渡動畫效果的代碼

更新時間：2022年08月19日 10:17:45 作者：船長在船上

這篇文章主要介紹了vue?navbar?tabbar導(dǎo)航條根據(jù)位置移動實現(xiàn)定位、顏色過渡動畫效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

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

實現(xiàn)效果：

代碼實現(xiàn)：

1.navbar、tabbar頂部導(dǎo)航過渡效果、顏色過渡；

<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; // 根據(jù)位置移動動態(tài)設(shè)置背景透明度
      this.style = { background: `rgba(253,85,39,${opacity})`};
}

到此這篇關(guān)于vue navbar tabbar導(dǎo)航條根據(jù)位置移動實現(xiàn)定位、顏色過渡動畫效果的文章就介紹到這了,更多相關(guān)vue navbar tabbar導(dǎo)航條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！