小程序侧边导航栏左右联动

1.点击左边导航栏,右边内容滚动到指定区域

用scroll-view组件中的scroll-into-view来解决

		  
			  
				{{item.name}}
			  
		  
		  
			  
			  
			  {{item.name}}
			  
				  
					  {{items.name}}
				  
			  
			  
			  
		  
	  

data(){
	activeIndex:0,//导航栏高亮索引
	contentActive:null,//内容块scroll-into-view的id
	heightArr:[],//内容块高度数组
	containerH:'',//窗口高度
	lastActive:0,
}

给导航栏跟内容块绑定上一样的id 这样点击导航栏的时候修改scroll-into-view的值就可以滚动到指定的内容区域(注:不可绑定数字)

//点击导航栏获取到id 修改scroll-into-view的
navClick(e){
		let index = e.currentTarget.dataset.idx
		let id =e.currentTarget.dataset.id
		this.setData({
			activeIndex:index,
			contentActive:id,
		})
	}

2.右边内容滚动 左边切换对应导航

onload(){
	this.ready()
},
ready(){
		var _this = this
		let heightArr = []
		let h = 0;
		//创建节点选择器
		const query = wx.createSelectorQuery();
		//选择id
		query.selectAll('.content-items').boundingClientRect()
		query.exec(function (res) {
			console.log(res,'execres')
		  //res就是右边所有内容盒子高度的数组
		  res[0].forEach((item) => {
		    h += item.height;
		    heightArr.push(h);
		  })
		  _this.setData({
		    heightArr: heightArr
		  })
		})
	},

监听scroll-view滚动,当scroll-view滚动的时候，就可以获取到滚动的距离，并动态计算滚动区间，判断出是右边哪个内容块的高度区间，并返回对应的索引

onScroll:function(e){
			const scrollTop = e.detail.scrollTop;
		    const scorllArr = this.data.heightArr;
		    const _this = this;
		    if (scrollTop >= scorllArr[scorllArr.length - 1 ] - (_this.data.conHeight/2)){
		      return;
		    }else{
		      for(let i=0;i< scorllArr.length; i++){
		        if(scrollTop >= 0 && scrollTop =scorllArr[i-1] && scrollTop