究极干货，完美实现微信小程序商品左右联动scroll-view的实现及性能优化,点击左边，右边滚动；右边滚动，左边也对应变化

微信小程序左右联动，点击左边右边滚动，滑动右边左边滚动及改变状态

如上图，在小程序中，我们经常需要一个功能，就是点击左边的列表选项，右边对应的内容滚动，而滑动右边的内容，左边对应的改变状态及位置，特别是商城站基本都涉及到，那么我们该怎么实现呢，这里我们就需要用到小程序的scroll-view这个组件；
先看代码

第一步，点击左边右边会对应滚动：

这个比较简单，利用scroll-view的属性scroll-into-view="",当我们点击左侧列表子项时，就把子项的id赋值给croll-into-view，就可以实现点击左侧，右侧滚动了，

第二步，滑动右侧，左侧高亮且滚动到可见区域：

这个才是左右联动的核心所在：那该怎么实现呢，思路是：scroll-view 有监听事件bindscroll,我们在监听事件里监听右侧内容滚动的高度，进而判断当前是属于那一块区域。在bindscroll事件里我们可以直接得到scrollTop当前滚动的高度，但是我怎么判断这个高度输入第几类商品呢，这个就需要得到右侧每一类商品的高度，然而每一类商品的高度不是写死的，由数据渲染的，有的数据多一点，高度就多一点，那该怎么获取呢，这个就需要我们用到小程序的另一个api wx.createSelectorQuery(),

获取右侧商品分类的高度代码:

var that=this;

var h=0;

var heightArr=[];

wx.createSelectorQuery().selectAll(’.sc_right_item’).boundingClientRect(function (rect) {//selectAll会选择所要含有该类名的盒子

}).exec(function (res) {

res[0].forEach((item)=>{

h+=item.height;

heightArr.push(h);

})

that.setData({heightArr:heightArr})

});

这样我们就得到右侧商品的分类的高度了，如上面获得的高度heightArr是一个数组，heightArr[0]就是第一类商品的高度(我这里是菜品1的高度)，而heightArr[1]就是第二类商品的高度加上第一类商品的高度，以此类推；这里获取的高度单位为px;正好和scrollTop的单位也是px;所以我们不需要在rpx和px之间进行换算；

然后右边滑动，左边对应高亮及滚动代码：

上面代码我们何以看到:左侧的active状态通过cp_index=i来实现，而左侧滚动的位置由leftTop=i*左侧子项的高度来实现（左侧子项的高度用wx.createSelectorQuery()来获取，不能是写死的，因为scroll-top="{{leftTop}}" 的值是px,所有需要获取，不然用写死的rpx,就要每个手机都要进行换算)

性能优化代码：

想想看，我们右边每滑动一下，Scroll-view 的监听就执行了好多下（比如次数为n），在加上每次执行的过程中又执行for循环(比如次数为m)，那么我们每滑动一下就必须setData的次数=n*m;性能可想而知，肯定会卡顿，那么怎么避免了，我们只需要在特定范围内执行一次，比如在0-500的高度内执行一次，那么我们就得另加判断，如下

第一类商品: 一 开始，我设oneShow=true,当它执行一次的时候就赋值为false,所以在第一类商品高度区域内只执行一次，如果到达第二类以上，就让oneShow=true回来，这样回滚的时候它又能执行；

第二类商品以上: 初始值zindex=0;如果不等于当前i值就让它执行，然后让它=i;第二次及而二次以上就不再执行，当它=i+1时又执行一次，然后在这个阶段就不再执行，以此类推
源码，直接打开链接在打开小程序开发工具即可查看：https://developers.weixin.qq.com/s/t7uVgOmT7gae