快捷導(dǎo)航

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)前頁面的滾動(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è)分離出來判斷
 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í)。

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

您可能感興趣的文章:

相關(guān)文章

VueJs路由跳轉(zhuǎn)——vue-router的使用詳解
本篇文章主要介紹了VueJs路由跳轉(zhuǎn)——vue-router的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-01-01
vue-router3.0版本中 router.push 不能刷新頁面的問題
這篇文章主要介紹了vue-router3.0版本中 router.push 不能刷新頁面的問題,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
vue前端和Django后端如何查詢一定時(shí)間段內(nèi)的數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于vue前端和Django后端如何查詢一定時(shí)間段內(nèi)的數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
Vue使用Vuex一步步封裝并使用store全過程
這篇文章主要介紹了Vue使用Vuex一步步封裝并使用store全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue 仿百度搜索功能實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了vue仿百度搜索功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
2017-02-02
Vue偵測(cè)相關(guān)api的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue偵測(cè)相關(guān)api，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue如何實(shí)現(xiàn)簡(jiǎn)易流程圖
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡(jiǎn)易流程圖問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue3.2?新增指令?v-memo?用法詳解(提高性能利器)
v-memo 接受一個(gè)依賴的數(shù)組，依賴的數(shù)組變化，v-memo 所對(duì)應(yīng)的 DOM 包括子集將會(huì)重新渲染，這篇文章主要介紹了Vue3.2?新增指令?v-memo?用法，提高性能的又一利器,需要的朋友可以參考下
2022-09-09
在Vuex使用dispatch和commit來調(diào)用mutations的區(qū)別詳解
今天小編就為大家分享一篇在Vuex使用dispatch和commit來調(diào)用mutations的區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue開發(fā)中出現(xiàn)Loading?Chunk?Failed的問題解決
本文主要介紹了Vue開發(fā)中出現(xiàn)Loading?Chunk?Failed的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-03-03