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

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

这篇文章主要介绍了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,'骑行');

总结

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

您可能感兴趣的文章:

ElementUI之表格toggleRowSelection选中踩坑记录
这篇文章主要介绍了ElementUI之表格toggleRowSelection选中踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue在.js文件中引入store和router问题
这篇文章主要介绍了vue在.js文件中引入store和router问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vue-admin-template 添加、跳转子页面问题
这篇文章主要介绍了Vue-admin-template 添加、跳转子页面问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue3组合式API中如何优化列表渲染性能
这篇文章主要为大家详细介绍了在Vue3组合式API中如何优化列表渲染性能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-12-12
vue实现手机端省市区区域选择
这篇文章主要为大家详细介绍了vue实现手机端省市区区域选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
源码浅析Vue3中的组件挂载
这篇文章主要带大家从源码分析一下Vue3中的组件挂载的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下
2023-09-09
vue实现下拉多选、可搜索、全选功能(示例代码)
本文介绍了如何在Vue中实现一个树形结构的下拉多选组件,支持任意一级选项的选择,全选功能,以及搜索功能,通过在mounted生命周期中获取数据,并使用handleTree函数将接口返回的数据整理成树形结构,实现了这一功能,感兴趣的朋友一起看看吧
2025-01-01
vue直播播放器mpegts.js使用方法详解
mpegts.js是在HTML5上直接播放MPEG-TS/FLV流的播放器,针对低延迟直播优化,这篇文章主要介绍了vue直播播放器mpegts.js使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-06-06
Vue中的验证登录状态的实现方法
这篇文章主要介绍了Vue中的验证登录状态的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
详解如何将 Vue-cli 改造成支持多页面的 history 模式
本篇文章主要介绍了详解如何将 Vue-cli 改造成支持多页面的 history 模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11