vue滾動(dòng)tab跟隨切換效果

更新時(shí)間：2020年06月29日 15:30:04 作者：改不了壞習(xí)慣的夜貓子

這篇文章主要為大家詳細(xì)介紹了vue滾動(dòng)tab跟隨切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

分享一個(gè)我前幾天做的移動(dòng)端 tab滾動(dòng)跟隨的例子

隨著滾動(dòng)條的滾動(dòng)，tab會(huì)對(duì)應(yīng)進(jìn)行切換

首先我們需要監(jiān)聽當(dāng)前頁(yè)面的滾動(dòng)

mounted(){
 //記錄每個(gè)內(nèi)容對(duì)用的dom數(shù)組
 this.arrDom = document.getElementsByClassName("item-content");
 window.addEventListener('scroll', this.handleScroll);
 },
 
 destroyed(){
 window.removeEventListener('scroll', this.handleScroll);
 },

我們的tab列表可以在data里面進(jìn)行自定義數(shù)組：

tabList:[{
 id:1,
 name:'詳情'
 },{
 id:2,
 name:'評(píng)論'
 },{
 id:3,
 name:'新聞'
 },{
 id:4,
 name:'關(guān)于'
 },{
 id:5,
 name:'相關(guān)'
 }],

然后我們?cè)赿om里面對(duì)應(yīng)渲染tab列表和對(duì)應(yīng)內(nèi)容,內(nèi)容可以直接關(guān)聯(lián)到tablist的item中的一個(gè)字段，也可以分開寫

<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++) {
  //因?yàn)橄旅媸褂玫搅薸+1，所以需要把最后一個(gè)分離出來(lái)判斷
 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組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何用vue-pdf包實(shí)現(xiàn)pdf文件預(yù)覽,支持分頁(yè)
這篇文章主要介紹了如何用vue-pdf包實(shí)現(xiàn)pdf文件預(yù)覽,支持分頁(yè)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue創(chuàng)建頭部組件示例代碼詳解
本文通過(guò)實(shí)例代碼給大家介紹了Vue創(chuàng)建頭部組件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-10-10
Vue自定義全局Toast和Loading的實(shí)例詳解
這篇文章主要介紹了Vue自定義全局Toast和Loading,需要的朋友可以參考下
2019-04-04
基于Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson的方法
本文通過(guò)實(shí)例代碼給大家介紹基于Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson的方法，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2021-09-09
Vue.js實(shí)現(xiàn)立體計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)立體計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
uniapp項(xiàng)目國(guó)際化標(biāo)準(zhǔn)的配置與實(shí)現(xiàn)
UniApp是一種基于Vue.js的跨平臺(tái)開發(fā)框架,可以快速地開發(fā)同時(shí)運(yùn)行在多個(gè)平臺(tái)的應(yīng)用程序,這篇文章主要介紹了uniapp項(xiàng)目國(guó)際化標(biāo)準(zhǔn)的配置與實(shí)現(xiàn),需要的朋友可以參考下
2023-11-11
Vue.js的模板語(yǔ)法詳解
Vue.js 的核心是一個(gè)允許你采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。這篇文章重點(diǎn)給大家介紹Vue.js的模板語(yǔ)法，感興趣的朋友跟隨小編一起看看吧
2020-02-02
VUE 組件轉(zhuǎn)換為微信小程序組件的方法
這篇文章主要介紹了VUE 組件轉(zhuǎn)換為微信小程序組件的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
vue中利用three.js實(shí)現(xiàn)全景圖的完整示例
這篇文章主要給大家介紹了關(guān)于vue中利用three.js實(shí)現(xiàn)全景圖的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
vue項(xiàng)目打包之后生成一個(gè)可修改IP地址的文件(具體操作)
這篇文章主要介紹了vue項(xiàng)目打包之后生成一個(gè)可修改IP地址的文件(具體操作),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-03-03