vue如何判斷組件進入可視區(qū)域
更新時間：2023年10月21日 16:47:49 作者：文i
這篇文章主要介紹了vue如何判斷組件進入可視區(qū)域問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue判斷組件進入可視區(qū)域
1、mounted 監(jiān)聽 監(jiān)聽元素是否進入/移出可視區(qū)域
window.addEventListener("scroll", this.scrollHandle, true); // 監(jiān)聽 監(jiān)聽元素是否進入/移出可視區(qū)域2、 methods 執(zhí)行事件
scrollHandle() {
const offset = this.$el.getBoundingClientRect();
const offsetTop = offset.top;
const offsetBottom = offset.bottom;
// const offsetHeight = offset.height;
// 進入可視區(qū)域
// console.log(offsetTop,offsetBottom)
if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
// console.log('進入可視區(qū)域');
} else {
// console.log('移出可視區(qū)域');
}
}3、記得在適當?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">結合三大平臺考生行為數(shù)據(jù)，為入駐高校實時分析當前報考情況，并精準預測當年招生趨勢</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)聽元素是否進入/移出可視區(qū)域
},
methods: {
scrollHandle() {
const offset = this.$el.getBoundingClientRect();
const offsetTop = offset.top;
const offsetBottom = offset.bottom;
// const offsetHeight = offset.height;
// 進入可視區(qū)域
// console.log(offsetTop,offsetBottom)
if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
// console.log('進入可視區(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);
}
}
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了一款mapbox gl開箱即用的地圖引擎庫，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue跳轉時根據(jù)url錨點(#xxx)實現(xiàn)頁面內(nèi)容定位的方法
本前端仔在做頁面跳轉的時候,被要求跳轉到頁面時候,把對應部分的內(nèi)容自動滾動到頂部,我一開始想到的就是根據(jù)錨點<a href="#xxid">進行處理,但是發(fā)現(xiàn)不太好實現(xiàn),于是便自己研究了一個比較取巧的方法,需要的朋友可以參考下2024-04-04
vue-element-admin項目導入和導出的實現(xiàn)
組件是Vue.js最強大的功能，這篇文章主要介紹了vue-element-admin項目導入和導出的實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了Vue3 Pinia如何修改全局狀態(tài)變量值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
UniApp是一個基于Vue.js開發(fā)的跨平臺應用開發(fā)框架,它可以使用一套代碼同時構建iOS、Android和Web應用,這篇文章主要給大家介紹了關于如何使用vue3+uni-app封裝音樂播放插件的相關資料,需要的朋友可以參考下2023-11-11
今天小編就為大家分享一篇vue二級菜單導航點擊選中事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue穿梭框實現(xiàn)上下移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
公共Hooks封裝報表導出useExportExcel實現(xiàn)詳解
這篇文章主要為大家介紹了公共Hooks封裝報表導出useExportExcel實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Vue.js 專注于 MVVM 模型的 ViewModel 層。它通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來。Vue.js和其他庫相比是一個小而美的庫，作者的主要目的是通過一個盡量簡單的 API 產(chǎn)生可反映的數(shù)據(jù)綁定和可組合的視圖組件，感覺作者的思路非常清晰。2016-04-04
Vue如何實現(xiàn)u-form多個form表單同時校驗
在 Vue 項目中使用 UView UI 的 u-form 組件時,多個表單同時校驗的需求非常常見,本文主要介紹了如何使用 u-form 組件實現(xiàn)多個表單同時校驗,需要的可以參考一下2025-01-01