vue如何监听元素横向滚动到最右侧

vue监听元素横向滚动到最右侧

这周接了个神奇的需求

就这么个导航栏 还有能左右拉动 还要分页

那么 就是监听元素滚动了

那么 要监听元素滚动到最右侧 然后加载下一页

监听滚动到最右侧 参考代码如下

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

界面上监听一个滚动事件 然后用这个事件监听滚动到最右侧

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

vue对数组元素的监视

❌ 如果直接用索引下标修改数组中的元素的值，这种方式是不能被Vue监视到的

✅ 但Vue可以监听数组的方法，也就是说，通过方法操纵数组，这种行为是可以被vue监听到的。

常用方法

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

✅ 另外一个修改数组元素的方法，通过Vue.set（）方法修改数组元素。

例子

修改 user 对象中hobby数组中的第二项的内容

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。