快捷導(dǎo)航

vue回到頂部監(jiān)聽(tīng)滾動(dòng)事件詳解

更新時(shí)間：2019年08月02日 08:29:42 作者：where_slr

這篇文章主要為大家詳細(xì)介紹了vue回到頂部監(jiān)聽(tīng)滾動(dòng)事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue回到頂部監(jiān)聽(tīng)滾動(dòng)事件，供大家參考，具體內(nèi)容如下

鼠標(biāo)滾到到頁(yè)面中間出現(xiàn)的工具浮框

<template>
<div class="tools">
<ul @mouseleave="mouseLeave()">
<li @click="toTop(step)">回到頂部</li>
<li @mouseover="mouseOver(1)">QQ</li>
<li @mouseover="mouseOver(2)">微信</li>
</ul>
<div v-if="showIndex === 1">玩QQ</div>
<div v-if="showIndex === 2">玩微信</div>
</div>
</template>

<script>
export default {
 name: 'FloatTools',
 props: {
 step: { //此數(shù)據(jù)是控制動(dòng)畫快慢的
  type: Number,
  default: 50
 }
 },
 data() {
 return {
  isActive: false,
  showIndex:0//默認(rèn)顯示下標(biāo)
 }
 },
 methods: {
 toTop(i) {
  //參數(shù)i表示間隔的幅度大小，以此來(lái)控制速度 
  document.documentElement.scrollTop -= i;
  if (document.documentElement.scrollTop > 0) {
  var c = setTimeout(() => this.toTop(i), 16);
  } else {
  clearTimeout(c);
  }
 },
 handleScroll() {
  //獲取滾動(dòng)距頂部的距離，顯示
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop；
  if (scrollTop > 60) {
  this.isActive = true;
  } else {
  this.isActive = false;
  }
 },
 mouseOver(index) {
 //鼠標(biāo)移到哪個(gè)工具上，對(duì)應(yīng)內(nèi)容顯示出來(lái)
  this.showIndex = index;
 },
 mouseLeave(){
 //鼠標(biāo)移出工具區(qū)域后1秒，內(nèi)容區(qū)域消失 
  let timer = setTimeout(() => {
   this.showIndex = 0;
   clearTimeout(timer)
  }, 500);
 }
 },
 mounted: function () {
 window.addEventListener('scroll', this.handleScroll, true); // 監(jiān)聽(tīng)（綁定）滾輪滾動(dòng)事件
 },
 destroyed() {
 window.removeEventListener('scroll', this.handleScroll); //離開(kāi)頁(yè)面需要移除這個(gè)監(jiān)聽(tīng)的事件
 }

}
</script>

如果遇到scroll一直打印是0，看是否樣式寫了overflow：auto去掉即可；或者給父級(jí)撐滿屏幕；

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

您可能感興趣的文章:

相關(guān)文章

稍微學(xué)一下Vue的數(shù)據(jù)響應(yīng)式（Vue2及Vue3區(qū)別）
這篇文章主要介紹了稍微學(xué)一下 Vue 的數(shù)據(jù)響應(yīng)式（Vue2 及 Vue3），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
Vue中watch使用方法詳解
watch就是當(dāng)值第一次綁定的時(shí)候，是不會(huì)執(zhí)行監(jiān)聽(tīng)函數(shù)的，只有值誕生改變才會(huì)執(zhí)行。如果需要在第一次綁定的時(shí)候也執(zhí)行函數(shù)，則需要用到immediate屬性，比如當(dāng)父組件向子組件動(dòng)態(tài)傳值時(shí)，子組件props首次獲取到父組件傳來(lái)的No認(rèn)知時(shí)，也需要執(zhí)行函數(shù)
2023-01-01
詳解Vue實(shí)現(xiàn)直播功能
這篇文章主要介紹了Vue實(shí)現(xiàn)直播功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-10-10
Vue3 JSX解釋器的實(shí)現(xiàn)
本文主要介紹了Vue3 JSX解釋器的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
VUE解決 v-html不能觸發(fā)點(diǎn)擊事件的問(wèn)題
今天小編就為大家分享一篇VUE解決 v-html不能觸發(fā)點(diǎn)擊事件的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)3
這篇文章主要為大家詳細(xì)介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)，教大家如何在某個(gè)對(duì)象中，新增某個(gè)屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
Vue中使用eslint和editorconfig方式
這篇文章主要介紹了Vue中使用eslint和editorconfig方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue中使用正則表達(dá)式進(jìn)行文本匹配和處理的方法小結(jié)
正則表達(dá)式在Vue中具有廣泛的應(yīng)用場(chǎng)景,包括文本匹配和處理、表單驗(yàn)證等,通過(guò)本文的介紹和示例,希望讀者能更好地理解和應(yīng)用正則表達(dá)式在Vue中的使用方法,感興趣的朋友一起看看吧
2023-11-11
vue-router beforeEach跳轉(zhuǎn)路由驗(yàn)證用戶登錄狀態(tài)
這篇文章主要介紹了vue-router beforeEach跳轉(zhuǎn)路由驗(yàn)證用戶登錄狀態(tài),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果
這篇文章主要介紹了Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-06-06