scrollToBottom: function () {
    this.$nextTick(() => {
        var container = this.$el.querySelector("#new_message");
        container.scrollTop = container.scrollHeight;
    });
}

调用此方法即可

vue 中滚动div至最底部的更多相关文章

  1. vue中滚动页面，改变样式&&导航栏滚动时，样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  2. vue中滚动事件绑定的函数无法调用问题

    问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...

  3. 【vue】vue中ref用法

    1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

  4. vue中添加echarts

    方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖.        cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...

  5. vue中插槽作用域的使用

    一.插槽作用域 1.简单来说就是带参数的插槽: 2.使用方式: 在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写 在组件内部用slot进行接受,如果给 ...

  6. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  7. 第七十七篇：ref引用(在vue中引用组件实例)

    好家伙, 为方便理解, 我们先来写一个经典自增一按钮, 再加上一个count清零按钮, Left.vue组件中: <template> <div > <h1>我是L ...

  8. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

  9. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

随机推荐

  1. Codeforces Global Round 4 Prime Graph CodeForces - 1178D （构造，结论）

    Every person likes prime numbers. Alice is a person, thus she also shares the love for them. Bob wan ...

  2. 【学习】027 Dubbo

    Dubbo概述 Dubbo的背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 ...

  3. CentOS7 配置阿里云yum源,非常之简单

    1.进入yum的文件夹 命令:cd   /etc/yum.repos.d/ 2.下载wget 命令:yum -y install wget 命令:yum install bash-completion ...

  4. SQLSERVER调用OPENROWSET的方法

    前言:正好这两天在同步生产环境的某张表数据到测试环境,之前用过一些同步数据软件,感觉不太可靠,有时候稍有操作不当,就会出现生产环境数据被清空等情况,还要去恢复数据.如果能恢复还好,不能恢复那么.... ...

  5. pyinstaller 打包工具的使用方法

    pyinstaller的安装 下载后可以输入pip list查看是否安装成功 然后切换到项目的根目录输入 pyinstaller -i favicon.ico -w -c game.py -p Que ...

  6. Java并发编程实战 第11章 性能与可伸缩性

    关于性能 性能的衡量标准有很多,如: 服务时间,等待时间用来衡量程序的"运行速度""多快". 吞吐量,生产量用于衡量程序的"处理能力",能够 ...

  7. Spring的DI和AOP

    Spring 为了降低Java开发的复杂性,Spring采取了以下4种关键策略:* 基于POJO的轻量级和最小入侵性编程:* 通过依赖注入和面向接口实现松耦合:* 基于切面和惯例进行声明式编程:* 通 ...

  8. 前端每日实战：136# 视频演示如何用 D3 和 GSAP 创作一个横条 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pOZKWJ 可交互视频 此视频是可 ...

  9. ZROI 19.07.30 简单字符串/ll

    写在前面:今天下午药丸--不会字符串,全程掉线/ll 给出字符串\(S\),\(q\)次询问,每次给出\(a,b,c,d\),询问\(S[a,b]\)的所有子串和\(S[c,d]\)最长公共前缀的最大 ...

  10. U盘安装linux(CentOS Kali ubuntu)无法挂载_实测

    最新的Kali linux官方下载地址: https://www.kali.org/downloads/ 刻录软件官网:http://rufus.ie/ 1.打开. 2.插入U盘. 3.自动下载插件. ...