uniapp 锚点跳转

uniapp 锚点跳转

HTML

<view class="index">
		<view class="container">
			<scroll-view scroll-x="true" class="container-top">
				<view class="container-top-item" :data-id="item" v-for="item in list" @tap="bindToView">{{item}}</view>
			</scroll-view>
			<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>

javascript

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;
				this.toView = id;
			}
}

CSS

<style lang="scss" scoped>
	.index {
		.container {
			width: 100%;

			&-top {
				width: 100%;
				white-space: nowrap;
				position: sticky;
				top: 0%;

				&-item {
					display: inline-block;
					width: 25%;
				}
			}

			.scroller {
				height: 100vh;

				.left {
					font-size: 50rpx;
					line-height: 150rpx;
				}
			}

		}
	}
</style>