微信小程序scroll-view之左右联动

• 凡是商城类的小程序必有导航联动的模块，近期业务不忙，决定copy 一下公司app到小程序。发现这个scroll-view还是有点知识点的。记一下，以防忘记。

• 左边联动右边其实很简单
  小程序API文档传送门（https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html?search-key=scroll-view）

  scroll-into-view绑定对应的ID就OK了

   // 左侧
  	 
   			
   				
  
   				{{item.categoryName}}
   			
   			
   		
   	//右侧
   		
   			
  
   				
  
   					
  
   							
   					
   					
  
   						
  
   							
  
   								
  {{type1.categoryName}}
   								
  
   									
  {{type2.categoryName}}
   								
   							
   						
   					
   				
   			
   		
  

• 而滚动右侧 联动左侧，官方文档则没有相应的api。自己动手丰衣足食。
  —> 左侧导航对应右侧的子区域，只要右侧滚动到对应的区域那么，就让左侧滚动到对应到导航

• first --> 页面加载完毕 计算右侧的高度。可以使用小程序的API（wx.createSelectorQuery();）

• second --> 计算右侧每一块的高度 储存备用 ，怎么计算呢？小程序节点选择select 不知道的筒子们可以了解一下。

    query.selectAll('.typeCon').boundingClientRect(function(n){
    			n.forEach((res) => {
    				s += res.height;
    				heightArr.push(s)
    			});
    			that.heightArr = heightArr;
    		}).exec()
    	//注意此方法 一定要在页面加载完之后执行，否则获取不到。生命周期挨着试了，都不行，最后无奈写了个延时器。总算是得到了。
  

• 右侧滚动时，根据滚动高度是否在相应的区间内，联动左侧

    onScroll(e){
   			let scrollTop = e.mp.detail.scrollTop;
     			let scrollArr = this.heightArr;
   			if (scrollTop >= scrollArr[scrollArr.length - 1] -this.pageHeight) {
   				return
   			} else {
   				for (let i = 0; i < scrollArr.length; i++) {
   					if (scrollTop >= 0 && scrollTop < scrollArr[0]) {
   						this.scrollTopId1 = "A0"
   					} else if (scrollTop >= scrollArr[i - 1] && scrollTop < scrollArr[i]) {
   						this.scrollTopId1 = "A"+i
   					}
   				}
   			}
   		},
  

• 源码就不贴了。写着玩，提供个思路可以看看。有问题的筒子们，可以沟通一下。