uni-app——scroll-into-view 锚点功能

注意点： 

scroll-into-view绑定scroll-view子元素id

scroll-view容器高度设置height: 100vh;

<template>
	<view class="container">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y left_box" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view id="demo1" class="scroll-view-item uni-bg-red type-item" v-for="(item,index) in list" :key="index"
				@click="selectEd(index)" :class="{active:index===currentIndex}">{{item.title}}</view>
		</scroll-view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y right_box" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll" :scroll-into-view="subItemId" :scroll-with-animation="true"
			scroll-top="0">
			<view class="" v-for="(item,index) in list" :key="index" :id="'subItem'+index">
				<view class="item-title">
					{{item.title}}
				</view>
				<view class="sub-item-box">
					<view id="demo1" class="sub-item " v-for="(item1,index) in item.subList">{{item.name}}</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				currentIndex: '',
				selectIndex: '',
				subItemId: '',
				list: [{
						title: '类别1',
						subList: [{
								id: 1,
								name: '商品'
							},
							{
								id: 2,
								name: '商品'
							},
							{
								id: 3,
								name: '商品'
							},
							{
								id: 4,
								name: '商品'
							},
							{
								id: 5,
								name: '商品'
							}
						]
					},
					{
						title: '类别2',
						subList: [{
								id: 1,
								name: '商品'
							},
							{
								id: 2,
								name: '商品'
							},
							{
								id: 3,
								name: '商品'
							},
							{
								id: 4,
								name: '商品'
							},
							{
								id: 5,
								name: '商品'
							}
						]
					},
					{
						title: '类别3',
						subList: [{
								id: 1,
								name: '商品'
							},
							{
								id: 2,
								name: '商品'
							},
							{
								id: 3,
								name: '商品'
							},
							{
								id: 4,
								name: '商品'
							},
							{
								id: 5,
								name: '商品'
							}
						]
					}, {
						title: '类别4',
						subList: [{
								id: 1,
								name: '商品'
							},
							{
								id: 2,
								name: '商品'
							},
							{
								id: 3,
								name: '商品'
							},
							{
								id: 4,
								name: '商品'
							}
						]
					},
					{
						title: '类别5',
						subList: [{
								id: 1,
								name: '商品'
							},
							{
								id: 2,
								name: '商品'
							}
						]
					}
				]
			}
		},
		methods: {
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			selectEd(index) {
				this.subItemId = 'subItem' + index
				this.currentIndex = index
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
	}

	.left_box {
		width: 20%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.type-item {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.active {
		background-color: pink;
	}

	.right_box {
		margin-left: 20%;
		width: 80%;
		height: 100vh;
	}

	.sub-item-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.item-title {
		text-align: center;
		margin: 50rpx;
	}

	.sub-item {
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		margin-bottom: 50rpx;
		background-color: pink;
	}
</style>