vue監(jiān)聽滾動事件的方法
vue中監(jiān)聽滾動事件,然后對其進行事件處理,一般有:1. 滾動到頂部吸附; 2. 根據(jù)滾動的位置激活對應的tab鍵(錨鏈接tab鍵)
這兩種方式的處理都是可通過監(jiān)聽scroll來實現(xiàn)
mounted(){
window.addEventListener('scroll',this.handleScroll) // 監(jiān)聽滾動事件,然后用handleScroll這個方法進行相應的處理
}
處理方法
1. 滾動到頂部吸附
html元素
<!--如果isFixed為true的話,就添加class is_fixed 設置固定定位-->
<div id="boxFixed" :class="{'is_fixed' : isFixed}">
這個是要滾動到頂部吸附的元素
</div>
methods方法
handleScroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滾動條偏移量
let offsetTop = document.querySelector('#boxFixed').offsetTop; // 要滾動到頂部吸附的元素的偏移量
this.isFixed = scrollTop > offsetTop ? true : false; // 如果滾動到頂部了,this.isFixed就為true
}
2. 根據(jù)滾動的位置激活對應的tab鍵(錨鏈接tab鍵)
vue里實現(xiàn)錨鏈接,不能直接用a鏈接方式,因為用的是hash路由,直接a鏈接會跳轉(zhuǎn)路由,可用scrollIntoView ,具體參照 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
(1) 實現(xiàn)錨鏈接:
<div class="flexitem" v-for="(item,index) in tabs" :class="seeThis==index?'active':''"><a href="javascript:void(0)" rel="external nofollow" @click="goAnchor(index)">{{item}}</a></div>
<div id="anchor1">block1</div>
(2) 實現(xiàn)滾動到相應的位置激活tab
data(){
return{
seeThis:0,
tabs:['tab0','tab1','tab2'],
}
},
methods:{
goAnchor(index) { // 也可以用scrollIntoView方法, 但由于這里頭部設置了固定定位,所以用了這種方法
// document.querySelector('#anchor'+index).scrollIntoView()
this.seeThis = index; var anchor = this.$el.querySelector('#anchor'+index)
document.body.scrollTop = anchor.offsetTop-100
document.documentElement.scrollTop = anchor.offsetTop-100
},
}
methods:{
handleScroll(){
var anchorOffset0 = this.$el.querySelector('#anchor0').offsetTop-100
var anchorOffset1 = this.$el.querySelector('#anchor1').offsetTop-100
var anchorOffset2 = this.$el.querySelector('#anchor2').offsetTop-100
if(scrollTop>anchorOffset0&&scrollTop<anchorOffset1){
this.seeThis = 0
}
if(scrollTop>anchorOffset1&&scrollTop<anchorOffset2){
this.seeThis = 1
}
if(scrollTop>anchorOffset2){
this.seeThis = 2
}
},
}
以上就是vue監(jiān)聽滾動事件的方法的詳細內(nèi)容,更多關于vue監(jiān)聽滾動事件的資料請關注腳本之家其它相關文章!
相關文章
基于Vue實現(xiàn)人民幣小寫轉(zhuǎn)為大寫功能
在金融類應用中,經(jīng)常需要將金額從小寫數(shù)字轉(zhuǎn)換為大寫形式,這種轉(zhuǎn)換主要用于正式票據(jù)、合同等場合,以增加文本的專業(yè)性和可讀性,本文將詳細介紹如何在Vue.js項目中實現(xiàn)這一功能,并提供多個示例和詳細的代碼說明,需要的朋友可以參考下2024-09-09
sortable+element 實現(xiàn)表格行拖拽的方法示例
這篇文章主要介紹了sortable+element 實現(xiàn)表格行拖拽的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
Vue Echarts實現(xiàn)圖表的動態(tài)適配以及如何優(yōu)化
這篇文章主要介紹了Vue Echarts實現(xiàn)圖表的動態(tài)適配以及如何優(yōu)化,在實際的前端開發(fā)過程中,動態(tài)適配是一個非常重要的問題,在數(shù)據(jù)可視化的場景下,圖表的動態(tài)適配尤為重要,需要的朋友可以參考下2023-05-05
vue新建環(huán)境變量以及網(wǎng)絡請求工具axios的二次封裝詳解
這篇文章主要為大家介紹了vue新建環(huán)境變量以及網(wǎng)絡請求工具axios的二次封裝詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06

