scroll-into-view 无法滚动到指定位置

根据官方文档介绍 scroll-into-view 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

<template>
    <view>
        <scroll-view 
            scroll-x="true" 
            scroll-with-animation="true" 
            :scroll-into-view="toView">
            <view style="display: flex;">
                <view 
                    :id="item.id" 
                    class="item" 
                    v-for="(item, index) in list" 
                    :key="index"
                    @click="handleClick(item)">
                    {{ item.title }}
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                toView: ''
            }
        },
        onLoad() {
            for (let i = 1; i <= 20; i++) {
                this.list.push({
                    title: 'v'+i,
                    id: 'V'+i
                })
            }
        },
        methods: {
            handleClick(item) {
                this.toView = item.id
            }
        }
    }
</script>

<style>
    .item {
        margin-left: 10upx;
        margin-right: 10upx;
        width: 100upx;
        height: 100upx;
    }
</style>

有几个关键点要配置缺一不可
1、配置每个滚动子元素的 id
2、动态配置 scroll-into-view 的值，scroll-into-view 的值需与任一滚动子元素的 id 保持一致
3、如果 scroll-y=”true” 还需要在 css 配置 scroll-view 的 height属性

看不明白的话，请看上方代码