uni点击导航栏滚动到本页面对应位置

html部分

<view class="nav-list" v-show="isList">
	<view class="list-text" v-for="(item,index) in navList" :key="index" @tap="clickNav(index)">{{item.text}}</view>
</view>

js部分(对应的变量提前在data中定义好)
1、在onLoad中拿到自适应winHeight赋值到scroll-view组件；
2、通过createSelectorQuery方法获取顶部id、对应板块一id离顶部的距离；
3、通过onPageScroll方法时时监听获取当前位置离顶部滚动的距离；
4、最后通过pageScrollTo实现点击跳转定位；

		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					var clientHeight = res.windowHeight,
					    clientWidth = res.windowWidth,
					    rpxR = 750 / clientWidth;
					var calc = clientHeight * rpxR;
					this.winHeight = calc  
				}
			})
		},
		

uni官网里面写到使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。所以我把他放在在moutend生命周期里面

		mounted() {
			var query = uni.createSelectorQuery()
			//获取对应模块到顶部的距离
			query.select('#block1').boundingClientRect((res) => {
				//console.log(res)
			    this.block_1ScrollTop = res.top
			}).exec()
			query.select('#block2').boundingClientRect((res) => {
			    this.block_2ScrollTop = res.top
			}).exec()
			query.select('#block3').boundingClientRect((res) => {
			    this.block_3ScrollTop = res.top
			}).exec()
		},

		onPageScroll(res) {//监听滚动事件，获取滚动条的当前位置
			//当距离大于120时显示回到顶部按钮
			if(res.scrollTop > 120){ 
				this.btnFlag = true
			} else {
				this.btnFlag = false
			};
			// console.log(res);
			this.top = res.scrollTop
		},

点击到对应模块的方法
减去30是因为我的导航栏是悬浮固定定位在顶部的，不减去他会挡住一部分

			clickNav(index){
				this.isList = false
				this.navIcon = true
				if(index == 0){
					console.log('跳转首页');
				} else {
					if(index == 1){
						uni.pageScrollTo({
							scrollTop:this.block_1ScrollTop - 30
						})
					} else {
						if(index == 2){
							uni.pageScrollTo({
								scrollTop:this.block_2ScrollTop - 30
							})
						} else {
							if(index == 3){
								uni.pageScrollTo({
									scrollTop:this.block_3ScrollTop - 30
								})
							} 
						}
					}
				}
			},