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

#app{width:100%;高度：100vh；.top{宽度：100%；高度：80px；文本对齐：居中；行高：80px；背景色：#e9e9e9；}.bottom{宽度：100%；高度：计算（100%-80px）；显示：弹性；.bottomLeft{宽度：288px；高度：100%；背景色：#eee；.leftItem{宽度：100%；高度：50px；行高：50px；文本对齐：居中；游标：指针；}.leftItem:hover{背景颜色：#dfe3f1;}.highLight{背景：#dfe3f1;}}.bottomRight{width:calc(100%-288px);高度：100%；盒子大小：边框博X;填充：36px36px036px；溢出-y：自动；.bottomRightContent{宽度：100%；框大小：边框框；填充底部：36px；.bottomRightContentHead{高度：25px；字体系列：平方SC；字体样式：正常；字体粗细：600；字体大小：24px；行高：25px；文本转换：大写；颜色：rgba(0,0,0,0.85);底部边距：32px；}.bottomRightContentBody{.el-col{位置：相对；底部边距：18px；.circle{显示：内联块；宽度：6px；高度：6px；背景：#4677f6；边界半径：50%；位置：绝对；顶部：8px；左：0；}.word{左边距：12px；字体系列：平方SC；字体样式：正常；字体粗细：正常；字体大小：14px；颜色：#4677f6；游标：指针；}.word:hover{文本装饰：下划线；}.topPlace{位置：绝对；顶部：1px；左边距：8px；}}}.bottomRightContentFooter{高度：1px；宽度：100%；边距顶部：14px；背景色：#e9e9e9；}}}}}问题描述左右联动的效果在移动端比较常见。比如美团外卖的商家外卖产品选型。一种常见的解决方案是使用better-scroll滑屏库来实现。不过偶尔web端的项目也会有这样的左右联动效果。本文使用vue框架中的原生js来实现相应的效果。先来看看最终的效果图：代码和代码中的注释都写的很贴心。请按照注释思路的步骤进行。#app{width:100%;高度：100vh；.top{宽度：100%；高度：80px；文本对齐：居中；行高：80px；背景色：#e9e9e9；}.bottom{宽度：100%；高度：计算（100%-80px）；显示：弹性；.bottomLeft{宽度：288px；高度：100%；背景色：#eee；.leftItem{宽度：100%；高度：50px；行高：50px；文本对齐：居中；游标：指针；}.leftItem:hover{背景颜色：#dfe3f1;}.highLight{背景：#dfe3f1;}}.bottomRight{width:calc(100%-288px);高度：100%；盒子大小：边框博X;填充：36px36px036px；溢出-y：自动；.bottomRightContent{宽度：100%；框大小：边框框；填充底部：36px；.bottomRightContentHead{高度：25px；字体系列：平方SC；字体样式：正常；字体粗细：600；字体大小：24px；行高：25px；文本转换：大写；颜色：rgba(0,0,0,0.85);底部边距：32px；}.bottomRightContentBody{.el-col{位置：相对；底部边距：18px；.circle{显示：内联块；宽度：6px；高度：6px；背景：#4677f6；边界半径：50%；位置：绝对；顶部：8px；左：0；}.word{左边距：12px；字体系列：平方SC；字体样式：正常；字体粗细：正常；字体大小：14px；颜色：#4677f6；游标：指针；}.word:hover{文本装饰：下划线；}.topPlace{位置：绝对；顶部：1px；左边距：8px；}}}.bottomRightContentFooter{高度：1px；宽度：100%；边距顶部：14px；背景色：#e9e9e9；}}}}}总结的方式有很多种，我写这个仅供参考。如果我写的有什么不清楚的地方，欢迎私信我或者评论文章。与大家一起进步