uni-app中scroll-view踩坑

scroll-into-view 属性踩坑

属性名	类型	说明
scroll-into-view	String	值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

场景：聊天界面，每添加一条消息，将滚动条滚动至底部

如果没有动态设置 scroll-into-view 指定的 id，则滚动条不会进行滚动
因此，每次添加一条消息在底部都需要改变一次 scroll-into-view 指向的 id

<template>
    <view class="content">
        <scroll-view class="test" 
                    scroll-y="true" 
                    scroll-with-animation="true"
                    :scroll-into-view="toBottom">
            <view v-for="(item,index) in list"
                 :id="toBottom + (index+1)">{{item}}</view>
        </scroll-view>
        <button type="default" @click="add">add</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: ['123','123','123'],
                toBottom: 'toBottom'
            }
        },
        methods: {
            add() {
                this.list.push('123')
                // 动态设置底部 id
                this.scrollBottom += this.list.length
            }
        }
    }
</script>

<style>
    .test {
        height: 50vh;
    }
</style>