uniapp 右侧滑动左侧自动定位到相应模块

适应各种手机的右侧滑动，左侧能自动定位到相应位置

1. 项目开发中，需要手机左侧是模块名称，右侧是所有模块的展示，右侧可滑动，滑动到另一个模块时，左侧能自动激活到相应模块
2. 主要使用scroll-view，@scroll，scrill-into-view。

html代码

//左侧常规写，声明一个变量控制样式激活状态
//右侧
<scroll-view class="scroll" scroll-y="true"  :scroll-into-view="scrollViewId" @scroll="onScroll">
	<view class="top1" id='a' (v-for)> 				//scrill-into-view绑定的id不能为纯数字，汉文，最好写成英文字符
	//内容
	</view>
</scroll-view>

js代码

最主要的一个方法

1. 左侧点击将scrollViewId 赋值id，跳转

onScroll(e){
  	    let tempTop = e.detail.scrollTop							//scroll期间赋值
		if(tempTop>=0 && tempTop<this.top1Height) {  		//在哪个高度中间
			this.screenCurrent = 0							//左侧激活
		}else if(tempTop>=this.top1Height && tempTop<2*this.top1Height) {
			this.screenCurrent = 1
		}else if(tempTop>= 2*(this.top1Height) && tempTop < 3*(this.top1Height)) {
			this.screenCurrent = 2
		}
	},



// uniapp动态获取各个div的高度
getTop1Hei(){
    var three = uni.createSelectorQuery().in(this);
	three.select('.top').boundingClientRect(data => {
		this.top1Height = data.height;					
	}).exec();
	//许多个...
}