vue实现列表左右联动效果

本文实例为大家分享了vue实现列表左右联动效果的具体代码，供大家参考，具体内容如下

先谈需求：左侧为分类列表，点击分类名右侧商品列表会滑动对应分类到顶部；右侧商品列表滑动到某一分类时左侧分类列表对应分类会滑动到顶部高亮显示。

再来说说思路：

1、引用swiper插件，这种方法冲突和不适配可能性太多，会越改越麻烦所以弃用。
2、使用页面滑动scroll事件，引入better-scroll组件。这个较为轻便，可自定义性较大，可以使用。

实现步骤：

1、左右两侧均使用v-for循环列表，使用index来索引目录。JS中使用数组下标来和列表index对应，实现左右互通功能。
2、左右列表都在循环列表的父层增加ref绑定，获取对应的列表滚动，以及对应元素高度，从而根据高度来判断需要滑动的距离。

效果图：

页面基础代码：

备注：代码做了二期优化

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。