uniapp实现简单的锚点定位

今天是人生第一次写博客

本人在校生，前端小白，写博客目的是为了记录平时学习，做项目时遇到的问题，将学习经验慢慢积累下来，希望能坚持下去。
正好最近用uniapp写个小程序的项目，要实现左边城市列表，右边字母索引，类似锚点定位的小功能，对大佬可能分分钟的事，但对我这个对原生小程序还不熟系的小白来说就有点费时了，于是写完后来写了个简单的demo来记录下

scroll-into-view

因为本人相比较原生小程序的语法，更熟悉Vue的语法，所以用的uniapp框架

scroll-view组件中的属性scroll-into-view是最主要的，不太会组织语言，上代码

<template>
	<view class="container">
		
		<!-- 左边内容 -->
		<scroll-view class="scroller" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">
			<view :id="item" class="left" v-for="item in list">{{item.toUpperCase()}}</view>
		</scroll-view>
		
		<!-- 右边索引 -->
		<view>
			<view :data-id="item" v-for="item in list" @tap="bindToView">{{item}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
				toView:''
			}
		},
		methods:{
			bindToView(event){
				var id = event.currentTarget.dataset.id;
				console.log(id)
				this.toView = id;
			}
		}
	}
</script>

<style lang="scss">
	.container{
		width: 100%;
		display: flex;
		scroll-view{
			height: 100vh;
			.left{
				font-size: 50rpx;
				line-height: 150rpx;
			}
		}
		> view{
			position: fixed;
			right: 10rpx;
		}
		
	}
</style>

需要注意的是scroll-view必须设置高度，不设置的话没效果，但不要设置100%，除非父元素写了高度.
同时虽然文档写的值应为某子元素id，但也可以是子孙元素
附上官方文档