uniapp+vue3 微信小程序中 页面切换tab 页面滚动到指定锚点位置，滚动页面时候到达指定锚点位置吸顶tab 会自动进行切换

uniapp+vue3 微信小程序中 页面切换tab 页面滚动到指定锚点位置，滚动页面时候到达指定锚点位置吸顶tab 会自动进行切换

页面布局如下：

<view class="tabs-box" v-if="showTabs">
	<view class="tabs-cell" :class="[tabsActive==index?'active':'']" @click="tabsFun(index)"
	v-for="(item,index) in tabsList" :key="index">{{item.name}}</view>
</view>
<view class="tabs0"> 。。。。。</view>
<view class="tabs1"> 。。。。。</view>
<view class="tabs2"> 。。。。。</view>

<script setup>
import { reactive, ref ,nextTick, } from 'vue';
let targetId = ref(null)//锚点id
let showTabs = ref(false)//是否显示tabs
let tabsActive = ref(0)//默认tabs选择
let tabsList = ref([{name:'商品',h:0},{name:'评价',h:0},{name:'详情',h:0}])
//切换tab 方法
function tabsFun(e){
	tabsActive.value = e
	//切换tab 滚动到对应锚点位置
	const query = uni.createSelectorQuery();
	query.select(`#tabs${e}`).boundingClientRect();
	query.selectViewport().scrollOffset();
	query.exec(res => {
	  if (res[0] && res[1]) {
	    const { top } = res[0];
	    const { scrollTop } = res[1];
		// console.log(scrollTop+top)
	    uni.pageScrollTo({
	      scrollTop: scrollTop + top - 120,//120 为实际顶部tab的高度
	      duration: 300 // 滚动持续时间，单位为ms
	    });
	  }
	});
}
//下面是滚动页面 切换顶部tab的方法
import { onPageScroll} from "@dcloudio/uni-app"
//首先 获取每个锚点元素距离顶部的高度距离
nextTick(()=>{
	tabsList.value.map((item,index)=>{
		const query = wx.createSelectorQuery()
		query.select(`#tabs${index}`).boundingClientRect(rect => {
			if (rect) { 
			//获取元素距离顶部的高度有时会忽略padding或margin的高度  这里适度加上一些高度即可  
			//如果中间有循环列表高度 需要加上 length*height 高度的距离 否则滚动不准确 如果列表为5 margin为20
				tabsList.value[index].h = rect.top + (20 * 5) 
			}
		}).exec();
	})
})
// onPageScroll 方法来更新 scrollTop 的值
onPageScroll((e) => {
	// tabs切换判断
	tabsList.value.map((item,index)=>{
		//如果第一个tab高度为0  可以自己判断
		if((e.scrollTop + 120) > item.h){ //120 为实际顶部tab的高度
			tabsActive.value = index
		}
	})
	// 是否显示吸顶tabs按钮
	if(e.scrollTop > 200){
		showTabs.value = true
	}else{
		showTabs.value = false
		tabsActive.value = 0
	}
})

</script>

注意 onPageScroll 方法 如果不生效 查找代码中是否有如下问题

1，页面最外层盒子容器 是否设置了 overflow-y: auto; overflow: hidden; 设置了就删除 否则滚动不生效,

2，pages.json 中指定页面 "disableScroll": false 必须设置为 false

3，如果是自定义导航栏 需要设置 "navigationStyle": "custom",

 {
	"path" : "pages/goods/goodsInfo",//商品详情
	"style" : {
		"navigationStyle": "custom", 
		"disableScroll": false 
	}
}