uni-app实现左右联动效果

1,首先在onload里面调用这个方法。可以得到右侧数据的高度数组

getHeightList() {
				
				let that=this
				let selectorQuery=uni.createSelectorQuery().in(this);
				
				selectorQuery.selectAll('.right_box').boundingClientRect(function(rects){
					let arr=[0]
					let top=0
					rects.forEach(function(rect){
						top +=rect.height
						arr.push(top)
					})
					that.rightHeightList=arr  //主要是它
					console.log(that.rightHeightList);
				}).exec()	
			},

2,点击左右分类按钮右侧滚动到对应的商品

先在右侧的scroll-view里和循环的view里面加属性







这是点击左侧分类按钮的方法

handleCateClick(index, cate_id, cate_title) {
				this.cateIndex = index;

				this.clickId='po'+index
},

这样,下面是操作滚动右侧商品,直接跳到左侧对应的按钮,写在方法里

productScroll(e) {
				let scrollTop=e.target.scrollTop;
				for(let i=0;i= h1 && scrollTop < h2){
						this.cateIndex=i
						
					}
				}
			},

你可能感兴趣的:(uni-app,javascript,html,html5)