uniapp scroll-view滚动页面

本文主要是介绍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)

参考：官方文档

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

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

这篇关于uniapp scroll-view滚动页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---