列表 v-for 循环场景(高频)
页面
html
<scroll-view scroll-y class="msg-scroll" :scroll-into-view="targetId">
<view class="msg-item" v-for="(item, index) in msgList" :key="index">
<view :id="'msg-' + item.id">
<view class="bubble bubble-right">{{ item.content }}</view>
</view>
</view>
</scroll-view>
JS
javascript
export default {
data() {
return {
msgList: [],
targetId: '',
}
},
onLoad(){
//装入数据
},
onShow() {
setTimeout(() => {
this.scrollToBottom();
}, 500);
},
methods: {
scrollToBottom() {
if (!this.msgList.length) return
const last = this.msgList[this.msgList.length - 1]
this.targetId = 'msg-' + last.id
// 清空,保证下次可以再次触发
this.$nextTick(() => {
this.targetId = ''
})
},
}
Style
html
.msg-scroll {
flex: 1;
padding: 20rpx;
height: 80vh;
}