zoukankan      html  css  js  c++  java
  • 小程序聊天界面滚到底部

    这里使用  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>
  • 相关阅读:
    Javascript特效实现鼠标移动到小图,查看大图效果;
    Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
    Asp.Net技术的学习顺序
    Asp.net中用来代替Response.Write("<script>alert('错误信息');</script>");
    python测试例子
    基于socket 的web服务器检测
    python xml解析
    MySQLdb 简单说明
    python 实现简单的计算器
    XML SAX or DOM
  • 原文地址:https://www.cnblogs.com/buerwei/p/11898485.html
Copyright © 2011-2022 走看看