uni app实现左右联动

目录

编写dom

右菜单栏联动左内容栏

左内容栏联动右菜单栏

求助

---

插件市场自带的插件不太好用 还是手动写吧

编写dom

		
			
			
				{{item.name}}
			
			
		
		
			
				
					
					{{child.name}}
				
			
		
		

右菜单栏联动左内容栏

先写获取高度方法

getheight(){
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.etc').boundingClientRect(data => {
				  data.forEach((i)=>this.heightlist.push(i.top))
				  console.log(this.heightlist);
				}).exec();
			}

在onload周期执行，这样一进去就可以获取了，使用在最外面的scroll里（看上面dom元素内容）

	 onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(88)
				}
			})
		}

然后写一下左菜单栏联动右内容栏，这个很简单，先动态设置一个active类的css

.active{
	color: orange;
	border-left: 4rpx solid orange;
}

然后设置给右菜单栏（最上面dom代码里有）

再设置点击事件（还是刚刚那条dom标签，最上面dom代码里有）

点击事件方法如下

toggleclass(index){
				this.cateindex=index
				this.cateview='item'+index
			},

再给左内容栏绑定scroll-to-view属性，

 因为此属性需求值是id，所以还要动态设置id（上面dom代码也有，这里只是摘出来方便看）

左内容栏联动右菜单栏

先获取左边每一个内容栏的高度，放到一个数组里

getheight(){
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.etc').boundingClientRect(data => {
				  data.forEach((i)=>this.heightlist.push(i.top))
				  console.log(this.heightlist);
				}).exec();
			}

求助

设置延时运行，低于三秒有可能获取不到，求助大神给点建议 

onReady() {
			setTimeout(()=>{
				this.getheight()
			},3000)
		}

然后给内容栏设置scroll滚动事件

编写scroll事件，可以做使用端识别应对不同情况

	changetitle(e){
				//内容栏固定高度时可用，方便
				// this.cateindex=Math.floor(e.detail.scrollTop/573)
				// //#ifdef H5
				// this.cateindex=Math.floor(e.detail.scrollTop/539)
				// //#endif
				// console.log(this.heightlist);
				this.heightlist.forEach((h,i)=>{
					//#ifndef H5
					let v=e.detail.scrollTop
					//#endif
					//#ifdef H5
					let v=e.detail.scrollTop+66
					//#endif
					if(v+this.heightlist[0]>=h){
						this.cateindex=i
						return false
					}
				})
				
			}