vue?navbar?tabbar導(dǎo)航條根據(jù)位置移動實(shí)現(xiàn)定位、顏色過渡動畫效果的代碼
更新時間：2022年08月19日 10:17:45 作者：船長在船上
這篇文章主要介紹了vue?navbar?tabbar導(dǎo)航條根據(jù)位置移動實(shí)現(xiàn)定位、顏色過渡動畫效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
vant文檔：Vant 2 - Mobile UI Components built on Vue
實(shí)現(xiàn)效果：
代碼實(shí)現(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; // 計(jì)算出移動位置
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ù)位置移動實(shí)現(xiàn)定位、顏色過渡動畫效果的文章就介紹到這了,更多相關(guān)vue navbar tabbar導(dǎo)航條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Django Vue實(shí)現(xiàn)動態(tài)菜單和動態(tài)權(quán)限
本文主要介紹了Django Vue實(shí)現(xiàn)動態(tài)菜單和動態(tài)權(quán)限，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了Vue3中正確使用ElementPlus的示例代碼,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue兩個組件間值的傳遞或修改的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue 組件封裝 并使用 NPM 發(fā)布的教程,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue3的setup的使用和原理解析,通過本文我們學(xué)習(xí)了?setup?函數(shù)執(zhí)行的過程及?Vue?是如何處理捕獲?setup?的返回結(jié)果的，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue中安裝使用cesium方式(親測可用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue使用vuedraggable插件實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了vue使用vuedraggable插件實(shí)現(xiàn)拖拽效果,本文分步驟介紹了安裝vuedraggable插件的方法及頁面引入的方法,需要的朋友可以參考下2024-04-04
Vue中如何進(jìn)行數(shù)據(jù)響應(yīng)式更新
Vue是一款流行的JavaScript框架，它提供了數(shù)據(jù)響應(yīng)式更新的能力，可以讓我們輕松地更新數(shù)據(jù)，并自動更新視圖，本文將介紹Vue中如何進(jìn)行數(shù)據(jù)響應(yīng)式更新，包括使用Vue的響應(yīng)式系統(tǒng)、使用計(jì)算屬性和使用Vue的watcher,需要的朋友可以參考下2023-06-06
vue不操作dom實(shí)現(xiàn)圖片輪播的示例代碼
這篇文章主要介紹了vue不操作dom實(shí)現(xiàn)圖片輪播的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12