小程序聊天界面滚到底部

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