uniapp根据scroll-view实现顶部tab和页面滑动联动选中

根据scroll-view的scroll-into-view属性值实现点击按钮滑动页面

根据滚动的距离实现顶部按钮的样式切换

HTML

<template>
	<view>
		<view class="btnBox">
			<button :class="{redBtn:(nowHight>=0&&nowHight<detailHight-10)}" @click="move('detail')">detail</button>
			<button :class="{redBtn:(nowHight>=detailHight-10&&nowHight<appraiseHight+detailHight)}" @click="move('appraise')">appraise</button>
		</view>
		<scroll-view scroll-y="true" :scroll-into-view="intoView" style="height:90vh" scroll-with-animation="true" @scroll="scroll">
			<view id='detail' class="detail" ref='detail'>detail</view>
			<view id='appraise' class="appraise" ref='appraise'>appraise</view>
		</scroll-view>
		
	</view>
</template>

JS

<script>
	export default {
		data() {
			return {
				intoView: '',
				name:'',
				nowHight:0,
				detailHight:0,
				appraiseHight:0,
				topHight:0
			}
		},
		mounted(){
			this.getHight()
		},
		methods: {
			getHight(){
				uni.createSelectorQuery().select('.detail').boundingClientRect(data => {
					this.detailHight=data.height
				}).exec()
				uni.createSelectorQuery().select('.appraise').boundingClientRect(data => {
					this.appraiseHight=data.height
				}).exec()
				uni.createSelectorQuery().select('.btnBox').boundingClientRect(data => {
					this.topHight=data.height
				}).exec()
			},
			scroll(e){
				this.nowHight=e.detail.scrollTop
			},
			move(name) {
				this.$nextTick(()=> {
					this.intoView=name
				})
			}
		}
	}
</script>

CSS

<style lang="scss" scoped>
	.detail{
		background-color: #ddd;
		height: 120vh;
	}
	.appraise{
		background-color: #aaa;
		height: 100vh;
	}
	.redBtn{
		background: #ddd;
	}
	.btnBox{
		display: flex;
		height: 10vh;
	}
</style>

除了使用scroll-view的方法外也可以直接使用页面距离，动态获取某元素离顶部的距离，点击按钮使页面滚动到某一位置，滑动页面获取当前高度