小程序聊天界面滚到底部

这里使用  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>

 

 

 

 

posted @ 2019-11-20 16:14  有梦想的切图仔  阅读(741)  评论(0编辑  收藏  举报