欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue的Scroll滾動事件觸發(fā)方式

 更新時間:2022年04月23日 14:06:18   作者:Daniel·M  
這篇文章主要介紹了Vue的Scroll滾動事件觸發(fā)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

Scroll滾動事件觸發(fā)

切記 當(dāng)你需要滾動事件觸發(fā) 千萬不要加 overflow-y: auto; 一旦加了 就 全是 0

例子

去掉 overflow-y: auto;

如果你需要把這個頁面當(dāng)做子組件引入 需要加true 因為 ···· 請看最后一張圖片 如果不加true 不變成捕獲事件 則無法成功引用

<template>
?? ?<div class="totop">
?? ??? ?<div class="btnTop" v-if="btnFlag" @click="backTop()">
?? ??? ??? ?<van-icon name="arrow-up" size="40" color="#CF9B6B" class="imga"/>
?? ??? ?</div>
?? ?</div>
</template>
<script>
export default {
?? ?name: "totop",
?? ?data() {
?? ??? ?return {
?? ??? ??? ?btnFlag: false,
?? ??? ?};
?? ?},
?? ?// 利用VUE寫一個在控制臺打印當(dāng)前的scrollTop。首先,在 mounted 鉤子中給window添加一個滾動滾動監(jiān)聽事件
?? ?mounted() {
?? ??? ?window.addEventListener("scroll", this.scrollToTop,true);
?? ??? ?//如果你需要把這個頁面當(dāng)做子組件引入 需要加true 因為 ···· ?請看最后一張圖片
?? ?},
?? ?destroyed() {
?? ??? ?window.removeEventListener("scroll", this.scrollToTop,true);
?? ?},
?? ?methods: {
?? ??? ?// 點擊圖片回到頂部方法,加計時器是為了過渡順滑
?? ??? ?backTop() {
?? ??? ??? ?let that = this;
?? ??? ??? ?let timer = setInterval(() => {
?? ??? ??? ??? ?let ispeed = Math.floor(-that.scrollTop / 5);
?? ??? ??? ??? ?document.documentElement.scrollTop = document.body.scrollTop =
?? ??? ??? ??? ??? ??? ?that.scrollTop + ispeed;
?? ??? ??? ??? ?if (that.scrollTop === 0) {
?? ??? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ??? ?}
?? ??? ??? ?}, 16);
?? ??? ?},
?? ??? ?// 監(jiān)聽回到頂部按鈕距瀏覽器頂部的距離,滾動的距離如果大于瀏覽器高度時,設(shè)置 btnFlag 為true,否則就是false
?? ??? ?scrollToTop() {
?? ??? ??? ?let that = this;
?? ??? ??? ?let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
?? ??? ??? ?that.scrollTop = scrollTop;
?? ??? ??? ?console.log(scrollTop)
?? ??? ??? ?//為了計算距離頂部的高度,當(dāng)高度大于50顯示回頂部圖標(biāo),小于50則隱藏
?? ??? ??? ?if (that.scrollTop > 50) {
?? ??? ??? ??? ?that.btnFlag = true;
?? ??? ??? ?} else {
?? ??? ??? ??? ?that.btnFlag = false;
?? ??? ??? ?}
?? ??? ?},
?? ?},
};
</script>
<style lang="scss" scoped>
.totop {
?? ?position: fixed;
?? ?right: 40px;
?? ?bottom: 60px;
?? ?width: 50px;
?? ?height: 50px;
?? ?padding: 10px;
?? ?cursor: pointer;
}
.imga {
?? ?position: relative;
?? ?top: -20px;
?? ?left: 15px;
?? ?text-align: center;
?? ?line-height: 50px;
?? ?border: 3px solid #CF9B6B;
?? ?width: 50px;
?? ?height: 50px;
?? ?border-radius: 50%;
}
</style>

監(jiān)聽Scroll事件無效

1.監(jiān)聽的dom元素設(shè)定高度,子元素的內(nèi)容要超過容器的高度

2.設(shè)定overflow為:auto/scroll,默認(rèn)值為visible,無法觸發(fā)

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue中監(jiān)聽路由參數(shù)的變化及方法

    vue中監(jiān)聽路由參數(shù)的變化及方法

    這篇文章主要介紹了vue中監(jiān)聽路由參數(shù)的變化,給大家介紹了vue中監(jiān)聽路由參數(shù)變化的方法,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12
  • vue彈窗組件的使用(傳值),以及彈窗只能觸發(fā)一次的問題

    vue彈窗組件的使用(傳值),以及彈窗只能觸發(fā)一次的問題

    這篇文章主要介紹了vue彈窗組件的使用(傳值),以及彈窗只能觸發(fā)一次的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • Vue組件封裝方案實現(xiàn)淺析

    Vue組件封裝方案實現(xiàn)淺析

    這篇文章主要介紹了Vue組件封裝方案實現(xiàn),我們將從分析組件封裝的優(yōu)勢開始,然后依次介紹 vue.js 的基本概念,以及如何創(chuàng)建、封裝和使用自定義組件
    2023-03-03
  • Vue2.0系列之過濾器的使用

    Vue2.0系列之過濾器的使用

    這篇文章主要介紹了Vue2.0系列之過濾器的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • 實現(xiàn)一個 Vue 吸頂錨點組件方法

    實現(xiàn)一個 Vue 吸頂錨點組件方法

    這篇文章主要介紹了實現(xiàn)一個 Vue 吸頂錨點組件方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • Vue2 cube-ui時間選擇器詳解

    Vue2 cube-ui時間選擇器詳解

    這篇文章主要為大家介紹了Vue2 cube-ui時間選擇器,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-12-12
  • vue基于element的區(qū)間選擇組件

    vue基于element的區(qū)間選擇組件

    這篇文章主要介紹了vue基于element的區(qū)間選擇組件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • Vue+Bootstrap實現(xiàn)簡易學(xué)生管理系統(tǒng)

    Vue+Bootstrap實現(xiàn)簡易學(xué)生管理系統(tǒng)

    這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap實現(xiàn)簡易學(xué)生管理系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-02-02
  • vue中使用axios固定url請求前綴

    vue中使用axios固定url請求前綴

    這篇文章主要介紹了vue中使用axios固定url請求前綴的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue在路由中驗證token是否存在的簡單實現(xiàn)

    vue在路由中驗證token是否存在的簡單實現(xiàn)

    今天小編就為大家分享一篇vue在路由中驗證token是否存在的簡單實現(xiàn),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11

最新評論