vue使用原生js实现web端左右滚动联动效果

问题描述

左右联动的效果,在移动端比较常见。比如美团外卖中的商家外卖商品选择。常见的解决方案就是使用better-scroll滑屏库去实现。不过偶尔web端的项目也会要做这样的左右联动的效果。本篇文章是在vue框架中使用原生js来实现相应的效果的。我们先看一下最终的效果图:
vue使用原生js实现web端左右滚动联动效果_第1张图片

代码附上

代码中的注释写的有思路步骤的。请按照注释思路步骤来。






总结

实现方式有很多种,我写的这种仅供参考。如有我写的不清晰的,欢迎私信或文章评论。与大家共同进步

你可能感兴趣的:(vue使用原生js实现web端左右滚动联动效果)