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)文章
vue路徑分為絕對路徑、相對路徑、~+路徑?及?別名+路徑,在js中,引入帶別名的文件路徑,不需要在別名前加~?,在css或者style中引入的需要在路徑前面加~,路徑以?~?開頭,其后的部分將會被看作模塊依賴,本文給大家介紹vue中引用文件路徑問題,感興趣的朋友一起看看吧2023-12-12
Vue3實現(xiàn)通過axios來讀取本地json文件
這篇文章主要介紹了Vue3實現(xiàn)通過axios來讀取本地json文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue中使用sass及解決sass-loader版本過高導(dǎo)致的編譯錯誤問題
這篇文章主要介紹了vue中使用sass及解決sass-loader版本過高導(dǎo)致的編譯錯誤問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue?cli2?和?cli3去掉eslint檢查器報錯的解決
這篇文章主要介紹了vue?cli2?和?cli3去掉eslint檢查器報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
基于uniapp+vue3自定義增強版table表格組件「兼容H5+小程序+App端」
uv3-table：一款基于uniapp+vue3跨端自定義手機端增強版表格組件,支持固定表頭/列、邊框、斑馬紋、單選/多選,自定義表頭/表體插槽、左右固定列陰影高亮顯示,支持編譯兼容H5+小程序端+App端,H5+小程序+App端,多端運行一致2024-05-05
這篇文章主要介紹了淺談Vue路由快照實現(xiàn)思路及其問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了vue中template模板編譯的過程全面剖析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue項目熱更新的坑及解決方案，具有很好的參考價值，希望對的大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項目中請求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決
這篇文章主要介紹了vue項目中請求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue 動態(tài)添加class,三個以上的條件做判斷方式
這篇文章主要介紹了vue 動態(tài)添加class,三個以上的條件做判斷方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11