小程序聊天界面滚到底部
这里使用 scroll-view 组件展示聊天内容
因为 croll-into-view 属性可以指定滚到指定位置
1 <scroll-view class="msg-list" scroll-y="true" :scroll-into-view="scrollToView"> 2 <view class="row" v-for="(row,index) in privateMassagerList" :key="index" :id='"message"+index'> 3 //coding 4 5 </view> 6 </scroll-view>
每条聊天消息的 id 为 message0,message1,message2,message3,.............
使用了 Vuex 储存聊天信息,每次接收到消息更新到 Vuex 里面,watch 监听信息列表的改变,从而改变滚动条位置
1 export default { 2 data() { 3 scrollToView: '',//滚动到元素位置 4 },
computed: {
//信息列表
privateMassagerList(){
return *****
}
}, 5 watch:{ 6 'privateMassagerList':() => { 7 this.$nextTick(() => { 8 this.scrollToView="message"+(this.privateMassagerList.length-1) 9 }) 10 }, 11 }, 12 }
分割线
这是以前vue项目的用法
<template> <div>
<ul class="message-list" ref="list">
<li v-for="msg in privateMassagerList"></li>
</ul>
</div>
</template> <script> export default {
computed: {
//信息列表
privateMassagerList(){
return *****
}
},
watch: {
'privateMassagerList': function () {
this.$nextTick(() => {
const ul = this.$refs.list
ul.scrollTop = ul.scrollHeight
})
}
}
</script>
<style>
.message-list{
border: 1px solid #ccf;
font-size: 16px;
height: 400px;
margin: 0;
overflow-y: auto;
padding: 0;
}
</style>