小程序聊天界面滚到底部

这里使用  scroll-view 组件展示聊天内容

因为  croll-into-view   属性可以指定滚到指定位置

 

<scroll-view class="msg-list" scroll-y="true" :scroll-into-view="scrollToView">       
    <view class="row" v-for="(row,index) in privateMassagerList" :key="index" :id='"message"+index'>
　　　　　　//coding

    </view>
</scroll-view>

每条聊天消息的 id 为  message0，message1，message2，message3，.............

 

使用了 Vuex 储存聊天信息，每次接收到消息更新到 Vuex 里面，watch 监听信息列表的改变，从而改变滚动条位置

 export default {
    data() {
      scrollToView: '',//滚动到元素位置
    },
　　　　computed: {
　　　　　　//信息列表
　　　　　　privateMassagerList(){
　　　　　　　　return *****
　　　　　　}

　　　　},
    watch:{
       'privateMassagerList':() => {
          this.$nextTick(() => {
             this.scrollToView="message"+(this.privateMassagerList.length-1)
          })
        },
   },    
 }

 

---

 

 分割线

---

 

这是以前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>