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,'骑行');

总结

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

您可能感兴趣的文章:

vue+uniapp瀑布流布局多种实现方式示例代码
由于使用uniapp开发的微信小程序不需要考虑响应式,因此瀑布流的实现相对于pc端更为简单,下面这篇文章主要给大家介绍了关于vue+uniapp瀑布流布局多种实现方式的相关资料,需要的朋友可以参考下
2023-03-03
vue实现列表固定列滚动
这篇文章主要为大家详细介绍了vue实现列表固定列滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
构建Vue大型应用的10个最佳实践(小结)
这篇文章主要介绍了构建Vue大型应用的10个最佳实践(小结),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
基于Vue.js与WordPress Rest API构建单页应用详解
这篇文章主要介绍了基于Vue.js与WordPress Rest API构建单页应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
vxe-table如何在单元格中渲染简单的饼图
这篇文章主要介绍了vxe-table如何在单元格中渲染简单的饼图，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue3 响应式数据 reactive使用方法
这篇文章主要介绍了Vue3 响应式数据 reactive使用方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11
一文搞懂Vue里的过渡和动画
在Vue中，过渡和动画是一种用于在组件之间添加平滑过渡效果和动画效果的高级用法，Vue提供了一些内置的过渡和动画功能，同时也支持自定义过渡和动画效果，本文就给大家介绍一些Vue中过渡和动画的高级用法,需要的朋友可以参考下
2023-06-06
Vue中 key keep-alive的实现原理
这篇文章主要介绍了Vue中 key keep-alive的实现原理,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
使用Vue.js和Element-UI做一个简单登录页面的实例
下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
解决vue的变量在settimeout内部效果失效的问题
今天小编就为大家分享一篇解决vue的变量在settimeout内部效果失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08