快捷導(dǎo)航

vue如何判斷組件進(jìn)入可視區(qū)域

更新時間：2023年10月21日 16:47:49 作者：文i

這篇文章主要介紹了vue如何判斷組件進(jìn)入可視區(qū)域問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue判斷組件進(jìn)入可視區(qū)域

1、mounted 監(jiān)聽監(jiān)聽元素是否進(jìn)入/移出可視區(qū)域

window.addEventListener("scroll", this.scrollHandle, true); // 監(jiān)聽 監(jiān)聽元素是否進(jìn)入/移出可視區(qū)域

2、 methods 執(zhí)行事件

scrollHandle() {
      const offset = this.$el.getBoundingClientRect();
      const offsetTop = offset.top;
      const offsetBottom = offset.bottom;
      // const offsetHeight = offset.height;
      // 進(jìn)入可視區(qū)域
      // console.log(offsetTop,offsetBottom)
      if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
        // console.log('進(jìn)入可視區(qū)域');
      
      } else {
        // console.log('移出可視區(qū)域');
 
      }
    }

3、記得在適當(dāng)?shù)臅r候移除事件監(jiān)聽

window.removeEventListener('scroll', this.scrollHandle, true);

vue判斷組件是否出現(xiàn)在可視區(qū)，使用動畫

 <div class="real-time-data">
            <h1 class="title">實時招生數(shù)據(jù)</h1>
            <div class="detail">結(jié)合三大平臺考生行為數(shù)據(jù)，為入駐高校實時分析當(dāng)前報考情況，并精準(zhǔn)預(yù)測當(dāng)年招生趨勢</div>
            <div class="img-box p-relative ">
                <img src="@/assets/images/edudata-h5/real-time-data-bg1.webp" alt="" class="bg1">
                <img src="@/assets/images/edudata-h5/real-time-data-bg2.webp" alt="" class="bg2 p-absolute" :class="isShowAnimation ? 'img-showBigL' :''">
                <img src="@/assets/images/edudata-h5/real-time-data-bg3.webp" alt="" class="bg3 p-absolute" :class="isShowAnimation ? 'img-showBigR' :''">
                <img src="@/assets/images/edudata-h5/real-time-data-bg4.webp" alt="" class="bg4 p-absolute" :class="isShowAnimation ? 'img-showBigL' :''">
            </div>
        </div>

export default {
    data() {
        return {
            isShowAnimation: false
        }
    },
    mounted() {
        window.addEventListener("scroll", this.scrollHandle, true); // 監(jiān)聽 監(jiān)聽元素是否進(jìn)入/移出可視區(qū)域

    },
    methods: {
        scrollHandle() {
            const offset = this.$el.getBoundingClientRect();
            const offsetTop = offset.top;
            const offsetBottom = offset.bottom;
            // const offsetHeight = offset.height;
            // 進(jìn)入可視區(qū)域
            // console.log(offsetTop,offsetBottom)
            if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
                // console.log('進(jìn)入可視區(qū)域');
                this.isShowAnimation = true
            } else {
                this.isShowAnimation = false
                // console.log('移出可視區(qū)域');

            }
        }

    }
}

		//動畫
 .img-showBigL {
        animation: fadeinShowL 1.5s forwards
    }

    .img-showBigR {
        animation: fadeinShowR 1.5s forwards
    }

    @keyframes fadeinShowL {
        0% {
            opacity: 0;
            transform: translate(100px, 0) scale(0.5);
        }

        ;

        100% {
            opacity: 1;
            transform: translate(0px, 0) scale(1);
        }
    }

    @keyframes fadeinShowR {
        0% {
            opacity: 0;
            transform: translate(-100px, 0) scale(0.5);
        }

        ;

        100% {
            opacity: 1;
            transform: translate(0px, 0) scale(1);
        }
    }