关于uniapp的scroll-view组件设置scroll-top失效的问题

176 阅读1分钟

最近在使用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>

此时你会发现每次都能滚动到指定位置了,不过可能这只是其中一种解决办法,如果还有其他解决办法欢迎大家在评论区讨论哈!

本文到这里就结束啦,希望能够帮助到大家!