微信小程序如何实现scroll-view左右联动，形成长尾词滚动效果？

本文共计1196个文字，预计阅读时间需要5分钟。

微信小程序利用scroll-view实现左右联动，供大家参考。具体内容如下：点击左边的按钮时，右边可以跳转到指定位置。首先要注意使用scroll-view组件实现屏幕滚动，需要给scroll-view设置固定高度。

微信小程序利用scroll-view实现左右联动，供大家参考，具体内容如下

点击左边的按钮时，右边可以跳动到指定的位置

• 首先要注意使用scroll-view竖屏滚动，需要给scroll-view固定高度
  
• 其次在点击时，需要给需要滚动的scroll-view加上scroll-into-view,其值应该是子元素的id,且id不能以数字 开头
  

滚动右边，左边菜单跳到相应的位置

• 其实现的思想是，在右边滚动屏滚动时，得到滚动的距离。将右边滚动屏中各模块到达顶部的距离计算出来放到一个数组中。第一个模块的滚动距离是本身的高度，第二个模块的滚动距离是第一个模块的高度加上自身的高度，以此类推。滚动时，判断滚动距离在保存好的数组中的哪个阶段，并以此得出符合条件的下标值，将左侧菜单对应的下标中的值做改动，就可以实现左右联动。