vue如何監(jiān)聽元素橫向滾動到最右側

更新時間：2023年10月21日 09:31:23 作者：跟?耿瑞?卷出一片天

這篇文章主要介紹了vue如何監(jiān)聽元素橫向滾動到最右側問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue監(jiān)聽元素橫向滾動到最右側

這周接了個神奇的需求

就這么個導航欄還有能左右拉動還要分頁

那么就是監(jiān)聽元素滾動了

那么要監(jiān)聽元素滾動到最右側然后加載下一頁

監(jiān)聽滾動到最右側參考代碼如下

<div
  class = "Navigation"
   ref = "scrollRef"
   @scroll="loadImg($event)"
></div>

界面上監(jiān)聽一個滾動事件然后用這個事件監(jiān)聽滾動到最右側

loadImg(event){
	let el=event.target;
	if(Math.ceil(el.scrollLeft+el.clientWidth) >= el.scrollWidth){
	    console.log("已滾動到最右側");
	}
},

vue對數組元素的監(jiān)視

? 如果直接用索引下標修改數組中的元素的值，這種方式是不能被Vue監(jiān)視到的

? 但Vue可以監(jiān)聽數組的方法，也就是說，通過方法操縱數組，這種行為是可以被vue監(jiān)聽到的。

常用方法

push（）
pop（）
shift（）
unshift（）
splice（）
sort（）
reverse（）

? 另外一個修改數組元素的方法，通過Vue.set（）方法修改數組元素。

例子

修改 user 對象中hobby數組中的第二項的內容

Vue.set(vm.user.hobby,1,'騎行');

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue中引用文件路徑問題小結
vue路徑分為絕對路徑、相對路徑、~+路徑?及?別名+路徑,在js中,引入帶別名的文件路徑,不需要在別名前加~?,在css或者style中引入的需要在路徑前面加~,路徑以?~?開頭,其后的部分將會被看作模塊依賴,本文給大家介紹vue中引用文件路徑問題,感興趣的朋友一起看看吧
2023-12-12
Vue3實現通過axios來讀取本地json文件
這篇文章主要介紹了Vue3實現通過axios來讀取本地json文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue中使用sass及解決sass-loader版本過高導致的編譯錯誤問題
這篇文章主要介紹了vue中使用sass及解決sass-loader版本過高導致的編譯錯誤問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
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路由快照實現思路及其問題
這篇文章主要介紹了淺談Vue路由快照實現思路及其問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
vue中template模板編譯的過程全面剖析
這篇文章主要介紹了vue中template模板編譯的過程全面剖析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue項目熱更新的坑及解決
這篇文章主要介紹了vue項目熱更新的坑及解決方案，具有很好的參考價值，希望對的大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue項目中請求數據特別多導致頁面卡死的解決
這篇文章主要介紹了vue項目中請求數據特別多導致頁面卡死的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue 動態(tài)添加class,三個以上的條件做判斷方式
這篇文章主要介紹了vue 動態(tài)添加class,三個以上的條件做判斷方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11