最近在使用uniapp开发微信小程序的过程中使用到了内置的scroll-view组件,在此把我其中踩过的一个坑分享给大家!
我的需求是点击某个按钮然后scroll-view组件需要滚动到指定的位置,查看uniapp官方文档后我了解到了scroll-view组件的scroll-top属性,但是发现我将scroll-top设置为0的时候似乎不生效,又或者只生效一次,经过测试发现只有当你设置的scroll-top值与当前的值不相等时才会触发滚动到指定位置的操作,于是就有了以下代码实现
<script setup lang="ts">
/** REF: 滚动量 */
const scrollTop = ref(1)
// EVENT: 点击 back-top
const onClickBackTop = () => {
scrollTop.value = 0
// 踩坑:uni-app 中 scroll-view 的 scrollTop 属性只有在变化时才会触发滚动
const _delay = setTimeout(() => {
// 重置滚动量
scrollTop.value = 1
clearTimeout(_delay)
}, 10)
}
</script>
<template>
<scroll-view
:scroll-y="true"
:scroll-top="scrollTop"
>
</scroll-view>
</template>
此时你会发现每次都能滚动到指定位置了,不过可能这只是其中一种解决办法,如果还有其他解决办法欢迎大家在评论区讨论哈!
本文到这里就结束啦,希望能够帮助到大家!