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+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
这篇文章主要为大家介绍了React DOM diff 对比Vue DOM diff 区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
第一次用Vue+MySQL实现注册登录功能,就已经踩了很多坑,下面这篇文章主要给大家介绍了关于使用Vue+MySQL实现登录注册案例的相关资料,需要的朋友可以参考下2022-05-05
在运行Vue项目时遇到npm安装错误可使用命令npminstall--legacy-peer-deps解决,若VsCode中无法运行npm命令,则可能是IDE配置未生效,可尝试重启电脑或使用cmd命令行直接在项目目录下运行2024-10-10
这篇文章主要介绍了vue对象复制方式(深拷贝,多层对象拷贝方式在后面)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
下面小编就为大家分享一篇vue刷新和tab切换实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue.use与Vue.prototype的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要为大家详细介绍了基于vue2实现上拉加载功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
Vue3响应式高阶用法之shallowReadonly()使用
在前端开发中,Vue3的shallowReadonly() API允许开发者创建部分只读的状态,这对于保持顶层属性不变而内部属性可变的场景非常有用,本文将详细介绍 shallowReadonly() 的使用方法及其应用场景,具有一定的参考价值,感兴趣的可以了解一下2024-09-09
购物车是电商必备的功能,可以让用户一次性购买多个商品,下面这篇文章主要给大家介绍了关于前端Vue学习之购物车项目的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
最新评论