uniapp scroll-view滚动页面

页面滚动固定距离（scrollTop）

<template>
	<view>
		<button @click="Test">测试</button>
		<scroll-view style="height: 100px;" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
			<view style="height: 20px;box-sizing: border-box;border: 1px dashed red;" v-for="item in data">{{item.name}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				scrollTop: 0
			}
		},
		onLoad() {
			for (let index = 0; index < 100; index++) {
				this.data.push({
					name: index
				})
			}
		},
		methods: {
			Test() {
				this.scrollTop += 40;
			}
		}
	}
</script>

<style>

</style>

滚动结果

注意事项

1. 必须要设置一个固定的高度
2. 移动的单位是px

滚动到指定元素（scroll-into-view）

<scroll-view style="height: 100px;" scroll-into-view="item10" :scroll-top="scrollTop"  scroll-y="true" class="scroll-Y">
			<view style="height: 20px;box-sizing: border-box;border: 1px dashed red;" :id="'item'+item.name"
				v-for="item in data">{{item.name}}
			</view>
</scroll-view>

设置一个id，就可以实现跳转了。

注意事项

如果scroll-into-view绑定的是一个动态变量。注意设置初始值为空字符串。
然后再去进行赋值，否则会设置初始值无效。

仅在H5中实现滚动

setTimeout(() => {
	const doms = document.getElementsByClassName("item_sel");
	if (doms.length > 0) {
		// 滚动到该元素
		doms[0].scrollIntoView({
			behavior: 'smooth',
			block: 'start',
			inline: 'nearest'
		});
	}
}, 1000)

参考：官方文档

总结，基本上参照官方文档就行，但是有一些细节，还是得自己去使用才能够体会的到的。
就以这篇文章详细的记录一下具体的实现过程。

总之就是，先现实一些预期的效果，再慢慢的去调整。