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路径分为绝对路径、相对路径、~+路径 及 别名+路径,在js中,引入带别名的文件路径,不需要在别名前加~ ,在css或者style中引入的需要在路径前面加~,路径以 ~ 开头,其后的部分将会被看作模块依赖,本文给大家介绍vue中引用文件路径问题,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了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路由快照实现思路及其问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了vue中template模板编译的过程全面剖析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue项目热更新的坑及解决方案，具有很好的参考价值，希望对的大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue项目中请求数据特别多导致页面卡死的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue 动态添加class,三个以上的条件做判断方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论