vue聊天发送消息页面滚动到底部

最新推荐文章于 2024-08-09 11:20:59 发布

前端技术负责人

最新推荐文章于 2024-08-09 11:20:59 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43837268/article/details/107592771

版权

vue 专栏收录该内容

192 篇文章 4 订阅

订阅专栏

<!-- 消息列表 -->
      <div class="message-list" ref="message-list">
        <div class="message-item" :class="{reverse:item.isMe}" v-for="item in messages" :key="item">
          <van-image
            class="avatar"
            slot="icon"
            round
            width="30"
            height="30"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          ></van-image>
          <div class="title">
            <span>{{item.msg}}</span>
          </div>
        </div>
      </div>
<script>
import io from "socket.io-client";
export default {
  name: "UserChat",
  components: {},
  props: {},
  data() {
    return {
      messages: [],
    };
  },
  watch: {
    messages(value) {
        //页面渲染完成后执行
      this.$nextTick(() => {
        this.toBottom();
      });
    },
  },
  computed: {},
  methods: {
    toBottom() {
      const listContainer = this.$refs["message-list"];
      listContainer.scrollTop = listContainer.scrollHeight;
    },
    
  },
  created() {
    
  },
  mounted() {},
};
</script>