vue如何監(jiān)聽元素橫向滾動到最右側(cè)
更新時間：2023年10月21日 09:31:23 作者：跟?耿瑞?卷出一片天
這篇文章主要介紹了vue如何監(jiān)聽元素橫向滾動到最右側(cè)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue監(jiān)聽元素橫向滾動到最右側(cè)
這周接了個神奇的需求
就這么個導(dǎo)航欄 還有能左右拉動 還要分頁
那么 就是監(jiān)聽元素滾動了
那么 要監(jiān)聽元素滾動到最右側(cè) 然后加載下一頁
監(jiān)聽滾動到最右側(cè) 參考代碼如下
<div class = "Navigation" ref = "scrollRef" @scroll="loadImg($event)" ></div>
界面上監(jiān)聽一個滾動事件 然后用這個事件監(jiān)聽滾動到最右側(cè)
loadImg(event){
let el=event.target;
if(Math.ceil(el.scrollLeft+el.clientWidth) >= el.scrollWidth){
console.log("已滾動到最右側(cè)");
}
},
vue對數(shù)組元素的監(jiān)視
? 如果直接用索引下標修改數(shù)組中的元素的值，這種方式是不能被Vue監(jiān)視到的
? 但Vue可以監(jiān)聽數(shù)組的方法，也就是說，通過方法操縱數(shù)組，這種行為是可以被vue監(jiān)聽到的。
常用方法
push（）pop（）shift（）unshift（）splice（）sort（）reverse（）
? 另外一個修改數(shù)組元素的方法，通過Vue.set（）方法修改數(shù)組元素。
例子
修改 user 對象中hobby數(shù)組中的第二項的內(nèi)容
Vue.set(vm.user.hobby,1,'騎行');
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
ElementUI之表格toggleRowSelection選中踩坑記錄
這篇文章主要介紹了ElementUI之表格toggleRowSelection選中踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue在.js文件中引入store和router問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題
這篇文章主要介紹了Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了在Vue3組合式API中如何優(yōu)化列表渲染性能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)手機端省市區(qū)區(qū)域選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要帶大家從源碼分析一下Vue3中的組件掛載的相關(guān)知識,文中的示例代碼講解詳細,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以跟隨小編一起了解一下2023-09-09
vue實現(xiàn)下拉多選、可搜索、全選功能(示例代碼)
本文介紹了如何在Vue中實現(xiàn)一個樹形結(jié)構(gòu)的下拉多選組件,支持任意一級選項的選擇,全選功能,以及搜索功能,通過在mounted生命周期中獲取數(shù)據(jù),并使用handleTree函數(shù)將接口返回的數(shù)據(jù)整理成樹形結(jié)構(gòu),實現(xiàn)了這一功能,感興趣的朋友一起看看吧2025-01-01
mpegts.js是在HTML5上直接播放MPEG-TS/FLV流的播放器,針對低延遲直播優(yōu)化,這篇文章主要介紹了vue直播播放器mpegts.js使用的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-06-06
這篇文章主要介紹了Vue中的驗證登錄狀態(tài)的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
詳解如何將 Vue-cli 改造成支持多頁面的 history 模式
本篇文章主要介紹了詳解如何將 Vue-cli 改造成支持多頁面的 history 模式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11