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>
