uniapp实现商品详情锚点定位效果

1、直接复制粘贴引入uniapp页面

如果缺少什么css 自己补充就好了，做个笔记，内容过少的情况，tab选项不是百分百的切换到最后一个，没想好怎么优化

<template>
	<view class="page">
		<!-- 顶部选卡  -->
		<view class="scroll-row d-flex justify-between border-top position-fixed top-0" style="height: 80rpx;background-color: #FFFFFF;z-index: 1000;">
			<view 
				@tap="changeTab(index)"
				:class="tabIndex === index ? 'main-text-color ' : ''"
				class="scroll-row-item px-3 flex-1"
				style="height: 80rpx; line-height: 80rpx;"
				v-for="(i, index) in tabbars"
				:key="index"
			>
				<text class="font-md pb-1" :style="tabIndex === index ? 'border-bottom: 5rpx solid #3088ff; ' : ''">{{ i.name }}</text>
			</view>
		</view>
		<!-- 填充 -->
		<view style="height: 80rpx;" class="w-100"></view>
		<!-- 列表 -->
		<scroll-view scroll-y="true"  @scroll="tabScoll" :scroll-top="scrollInto" scroll-with-animation  :scroll-into-view="scrollinto" :style="'height:' + scrollH + 'px;'" @scrolltolower="loadmore(index)">
			 <view class="scroll-box">
				 <view class="box1" :id="'tab'+index" v-for="(item,index) in conentist" :key="index">
				 	 <view>我是第{{index}}个6666</view>
				     <view>我是第{{index}}个6666</view>
					 <view>我是第{{index}}个6666</view>
					 <view>我是第{{index}}个6666</view>
					 <view>我是第{{index}}个6666</view>
					 <view>我是第{{index}}个6666</view>
					 <view>我是第{{index}}个6666</view>
					 <view>我是第{{index}}个6666</view>
					 <view>我是第{{index}}个6666</view>
					 <view>我是第{{index}}个6666</view>
					 <view>我是第{{index}}个6666</view>
					 <view>我是第{{index}}个6666</view>
					 <view>我是第{{index}}个6666</view>
				
			
				 </view>
			 </view>
		
			<!-- 上拉加载更多 -->	
		<!-- 	 <view class="d-flex j-center a-center text-light-muted py-3">
				 {{item.loadText}}
			 </view> -->
			 
		</scroll-view>
		
	<!-- 底部栏 -->
		 <view class="cu-bar bg-white tabbar border shop foot" id="cubar">
		 	<button class="action" open-type="contact">
		 		<view class="cuIcon-service text-green">
		 			<view class="cu-tag badge"></view>
		 		</view>
		 		客服
		 	</button>
		 	<view class="action">
		 		<view class="cuIcon-cart">
		 			<view class="cu-tag badge">99</view>
		 		</view>
		 		购物车
		 	</view>
		 	<view class="bg-add submit">加入购物车</view>
		 	<view class="bg-send submit">立即订购</view>
		 </view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 滚动条子元素id
				scrollinto: '',
				scrollInto:0,
				scrollTopHeight:0,//滚动距离
				warpTop:[],
				// 滚动条高度
				scrollH: 500,
				// 当前选项索引
				tabIndex: 0,
				// 顶部选卡
				tabbars: [{ name: '商品介绍' ,id:0}, { name: '图文详情',id:1 }, { name: '商品评价',id:2 }, { name: '相关活动',id:3 }],
				// 模板内容
				conentist:[null,null,null,null],
				
				load: true
				
				
			}
		},
		onReady() {
			// 获取可视区域的高度
			uni.getSystemInfo({
				success: res => {
					let tabheight = 0;
					this.GetRect('#cubar').then((res2)=>{
						tabheight= res2.height
						// 因为获取的高度是px，设置的是upx ，需要转换
						this.scrollH = res.windowHeight - tabheight- uni.upx2px(82);
					})
					
				}
			});
			// 初始化事件
			this.__init()
			this.$nextTick(async function(){
				this.barInit();
			}) 
		},
		methods: {
			// 初始化事件
			__init(){
					
						 
			},
			// 顶部选卡 选择
			changeTab(index) {
				this.tabIndex = index;
				this.scrollinto= 'tab'+index
				// if(index==0){
				// 	this.scrollInto =this.warpTop[index]-44;
				// }else{
				// 	this.scrollInto =this.warpTop[index]-88;
				// }
			},
		
			// 加载数据- 根据轮播图触发索引获取数据-触底事件
			addSetData(){
				let index = this.tabIndex;
				// this.newsitem[index].list = demo2;
			},
			//触底
			loadmore(e){
				this.$nextTick(()=>{
					setTimeout(()=>{
						this.tabIndex =3;//触底事件比滚动事件先触发，用定时器解决，反正是浏览到最后，直接强制显示为最后一个tab
					},200)
				})
			},
			//scroll滚动
			async tabScoll(e){
				//48为兼容值 第一种计算
				// let scrollTop = e.detail.scrollTop;
				// this.scrollTopHeight = scrollTop;
				// let scrollTop1 = scrollTop;
				// if(scrollTop1<=this.warpTop[1] - 48){
				// 	this.tabIndex = 0;
				// }
				// if(scrollTop1>this.warpTop[1]-48 && scrollTop1<this.warpTop[2]-48){
				// 	this.tabIndex = 1;
				// }
				// if(scrollTop1>this.warpTop[2]-48 && scrollTop1<this.warpTop[3]-48){
				// 	this.tabIndex = 2;
				// }
				// if(scrollTop1>this.warpTop[3]-48){
				// 	this.tabIndex =3;
				// }
				
				//10为padding-top值 第2种计算
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.tabbars.length; i++) {
						let view = uni.createSelectorQuery().select("#tab" + this.tabbars[i].id);
						view.fields({
							size: true
						}, data => {
							this.tabbars[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.tabbars[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.tabbars.length; i++) {
					if (scrollTop > this.tabbars[i].top && scrollTop < this.tabbars[i].bottom) {
						// this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabIndex = this.tabbars[i].id
						console.log(scrollTop)
						return false
					}
				}
				
				
			},
			//获取节点距离顶部距离
			barInit:async function (index){
				let navTargetTop = [];
				let randoms = 93;//顶部栏高度+tab高度+兼容值				
				for(let  i = 0 ; i < this.tabbars.length ; i++){
					this.GetRect("#tab"+i).then(res=>{
						navTargetTop.push(parseInt(res.top))
					})
				}
				this.warpTop = navTargetTop;
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f2f4f7;
		width: 750rpx;
		min-height: 100vh;
	}
 .bg-add{
	 background-color:#3377FF ;
	 color: #FFFFFF;
 }	
.bg-send{
	 background-color:#3344FF ;
	 color: #FFFFFF;
 }	
 .box1{
	 padding-top: 10rpx;
	 border: 2rpx solid red;
	 margin-bottom: 30rpx;
 }
.scroll-box{
	padding-bottom: 40rpx;
}
</style>