vue滾動tab跟隨切換效果
更新時間：2020年06月29日 15:30:04 作者：改不了壞習(xí)慣的夜貓子
這篇文章主要為大家詳細介紹了vue滾動tab跟隨切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
分享一個我前幾天做的移動端 tab滾動跟隨的例子
隨著滾動條的滾動，tab會對應(yīng)進行切換
首先我們需要監(jiān)聽當(dāng)前頁面的滾動
mounted(){
//記錄每個內(nèi)容對用的dom數(shù)組
this.arrDom = document.getElementsByClassName("item-content");
window.addEventListener('scroll', this.handleScroll);
},
destroyed(){
window.removeEventListener('scroll', this.handleScroll);
},
我們的tab列表可以在data里面進行自定義數(shù)組：
tabList:[{
id:1,
name:'詳情'
},{
id:2,
name:'評論'
},{
id:3,
name:'新聞'
},{
id:4,
name:'關(guān)于'
},{
id:5,
name:'相關(guān)'
}],
然后我們在dom里面對應(yīng)渲染tab列表和對應(yīng)內(nèi)容,內(nèi)容可以直接關(guān)聯(lián)到tablist的item中的一個字段，也可以分開寫
<nav :class="headerFixed?'tabFixed tablist':'tablist'" id='tab'>
<div @click='handleSelectTab(item.id)' :class="active==item.id?'tab-item tab-active':'tab-item'" v-for='item in tabList' :key='item.id'>{{item.name}}</div>
</nav>
<div class="item-content">
<div>11111111</div>
</div>
<div class="item-content">
<div>22222</div>
</div>
<div class="item-content">
<div>33333</div>
</div>
<div class="item-content">
<div>44444</div>
</div>
<div class="item-content">
<div>555555</div>
</div>
然后就是我們的js部分了
handleScroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
this.headerFixed = scrollTop > this.offsetTop;
for (let i = 0; i < this.arrDom.length; i++) {
//因為下面使用到了i+1，所以需要把最后一個分離出來判斷
if(this.arrDom[this.arrDom.length-1].offsetTop-scrollTop>80){
if(this.arrDom[i].offsetTop-scrollTop<=80&&this.arrDom[i+1].offsetTop-scrollTop>80){
this.active = i+1
}
}else{
this.active = this.arrDom.length;
}
}
},
然后就成功完成了我們的效果！
關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學(xué)習(xí)教程進行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
如何用vue-pdf包實現(xiàn)pdf文件預(yù)覽,支持分頁
這篇文章主要介紹了如何用vue-pdf包實現(xiàn)pdf文件預(yù)覽,支持分頁問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文通過實例代碼給大家介紹了Vue創(chuàng)建頭部組件的相關(guān)知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了Vue自定義全局Toast和Loading,需要的朋友可以參考下2019-04-04
基于Vue+Openlayer實現(xiàn)動態(tài)加載geojson的方法
本文通過實例代碼給大家介紹基于Vue+Openlayer實現(xiàn)動態(tài)加載geojson的方法，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-09-09
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)立體計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
uniapp項目國際化標(biāo)準(zhǔn)的配置與實現(xiàn)
UniApp是一種基于Vue.js的跨平臺開發(fā)框架,可以快速地開發(fā)同時運行在多個平臺的應(yīng)用程序,這篇文章主要介紹了uniapp項目國際化標(biāo)準(zhǔn)的配置與實現(xiàn),需要的朋友可以參考下2023-11-11
Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進 DOM 的系統(tǒng)。這篇文章重點給大家介紹Vue.js的模板語法，感興趣的朋友跟隨小編一起看看吧2020-02-02
這篇文章主要介紹了VUE 組件轉(zhuǎn)換為微信小程序組件的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
vue中利用three.js實現(xiàn)全景圖的完整示例
這篇文章主要給大家介紹了關(guān)于vue中利用three.js實現(xiàn)全景圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了vue項目打包之后生成一個可修改IP地址的文件(具體操作),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03