vue js页面滚动到最底部

向右看齐 2022-10-22 04:30 244阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ODM4MjA5NDkw_size_16_color_FFFFFF_t_70][]

最近开发一个客服聊天，发送消息，消息需要展示到最低部，

// 发送消息
      sendMessage() {
        
        this.form.message = this.formInput
        this.form.senDate = this.getNowFormatDate();
    
        const form = JSON.parse(JSON.stringify(this.form))
        this.chatList = this.chatList.concat(form)
        
        if(this.form.toId){   // 客服在线
           console.log(JSON.stringify(this.form))
           this.websocket.send(JSON.stringify(this.form));
        }
    
        this.$nextTick(()=>{
          this.toBottom()
        })
        this.formInput = ""
    
    
      }

滚动函数

// 页面滚到最底部
      toBottom(){
        var height = document.body.clientHeight;
        window.scroll({ top: height , left: 0, behavior: 'smooth' });
    
      }

如果是div 有滚动条  让滚动条滚到最底部

// 滚动到最底部
        toBottom(){
          this.$nextTick(()=>{
            var scrollDom = document.getElementById('chatBox');
            scrollDom.scrollTop = scrollDom.scrollHeight
          })
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ODM4MjA5NDkw_size_16_color_FFFFFF_t_70]: /images/20221022/7415deab8e6344e0a93ed3383b1f373f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中点击加载更多滚动条滚动到页面最底部

<template> <div> <div class="table-container" ref="table-container">

淩亂°似流年/ 2023年10月11日 13:35/ 0 赞/ 65 阅读

相关 js 滚动条自动滚动到最底部

简介：功能简介，js 滚动条自动滚动到最底部效果展示： ![bb23a00672684fb2b7cf683b81c3e66e.png][] 核心代码： w

朱雀/ 2023年09月26日 22:23/ 0 赞/ 192 阅读

相关 js监听scrolltop_JS监听页面滚动到底部事件

Eclipse安装Spring-tool-suite 目录结构: // contents structure \[-\] 在Eclipse上安装Spring-tool-sui

分手后的思念是犯贱/ 2023年01月09日 01:12/ 0 赞/ 194 阅读

相关页面滚动条固定到最底部

页面滚动条固定到最底部项目中遇到的需求,具体可以用来实现聊天室发送消息后使最后发的消息展示在页面上等, 方法亲测有效 1. 在想要定位的位置添加一个空的`div`

Dear 丶/ 2022年12月08日 01:59/ 0 赞/ 174 阅读

相关 js 写一个方法判断页面滚动条到页面底部的距离

在开发项目的时候，有的页面数据很多，一次加载完成需要消耗大量的时间，都做了分页加载。这里写一段代码，来实现分页加载的时候是如何判断滚动条到页面底部，然后继续请求加载数据的

野性酷女/ 2022年11月28日 10:37/ 0 赞/ 257 阅读

相关 vue js页面滚动到最底部

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ODM4

向右看齐/ 2022年10月22日 04:30/ 0 赞/ 245 阅读

相关小程序如何自动滚动到页面底部？

经过实际验证，我使用 wx.pageScrollTo() 在 onReady() 中滚动页面，这个效果只在 tab 页面上可用，在子页面使用会让用户迷惑。 onRea

叁歲伎倆/ 2022年05月15日 17:49/ 0 赞/ 387 阅读

相关 ionic 页面滚动到底部方法

强列推荐先看这篇译文《[angular4 滚动事件][angular4]》 You’re trying to call a component method befo

骑猪看日落/ 2022年04月08日 18:13/ 0 赞/ 414 阅读

相关 vue 实现滚动到页面底部开始加载更多

直接上代码： <template> <div class="newsList"> <div v-for="(items, index) i

快来打我*/ 2021年12月17日 08:47/ 0 赞/ 701 阅读

相关 vue 滚动条移动到最底部

vue中div内的文字是动态刷新的，文字多了以后，滚动条没有实时滚动到最新文字的地方解决办法：使用以下代码 var container = this.$el

妖狐艹你老母/ 2021年09月01日 07:02/ 1 赞/ 1125 阅读