UNIAPP----仿淘宝详情页滚动

淘宝详情页，滚动时，上面的选项卡也随之改变，本代码为测试版，我自己测可用，全部复制可运行参考。

核心思想：监听屏幕滚动距离，动态修改上面选中样式，也就是上面的字体会被选中。

                  点击上面字体获取下标，跳转到自定义位置，类似于HTML锚点。

HTML：

<template>
	<view>
		<view class="" style="position: fixed;top: 0;width: 100%;">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		
		<view class="first"><text>这是第一页</text></view>
		<view class="two" ><text>这是第二页</text></view>
		<view class="three" ><text>这是第三页</text></view>
	</view>
</template>

u-tabs 是uview ui里面的局部选项卡组件。先引入，否则不识别。

JS：

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '商品'
				},
				{
					name: '详情'
				},
				{
					name: '推荐'
				}
			],
			current: 0,
		};
	},
    //动态修改选中字体
	onPageScroll(res) {
		this.top = res.scrollTop;
		console.log(this.top);
		if(this.top>=1430){
			this.current=2
		}else if(this.top>=700&& this.top<1430){
			this.current=1
		}else if(this.top>=0&& this.top<700){
			this.current=0
		}
		
	},
	methods: {
            //获取当前选中下标
		change(index) {
			this.current = index;
			console.log(this.current);
			// console.log(window)
			//判断选中下标，然后跳转指定高度
			if(this.current==0){
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 200,
				});
			}else if(this.current==1){
				uni.pageScrollTo({
				    scrollTop: 750,
				    duration: 200,
				});
			} else if(this.current==2){
				uni.pageScrollTo({
				    scrollTop: 1500,
				    duration: 200,
				});
			}
		}
	}
}
</script>

CSS：

<style scoped>
.first {
	width: 100%;
	height: 1500rpx;
	background-color: red;
}
.two {
	width: 100%;
	height: 1500rpx;
	background-color: orange;
}
.three {
	width: 100%;
	height: 1500rpx;
	background-color: #007aff;
}
</style>

复制粘贴，直接运行，仅供参考，自己修改。