在需要出现滚动条的 DOM上添加 v-scroll 属性:

<div class="chat-box" v-scroll="{auto: true}">
<div class="dialog-box">
<div class='' v-for="item in msgList" :key="item">
<div v-html="item.content"></div>
</div>
</div>
</div>

编写自定义指令 scroll

<script>
export default {
 ...
directives: {
scroll: {
bind (el, binding, vnode) {
const pause = (e) => {
let auto = binding.value ? binding.value.auto : false
let scrolled = el.scrollTop + el.clientHeight + 1 < el.scrollHeight
let timeout
window.clearTimeout(timeout)
timeout = setTimeout(() => {
if (auto && scrolled) {
el.setAttribute('v-scroll2-manually', 'yes')
} else if (auto && !scrolled) {
el.setAttribute('v-scroll2-manually', '')
} else {
el.removeEventListener('scroll', pause)
}
}, 600)
}
el.addEventListener('scroll', pause)
},
update (el, binding, vnode) {
if (!el.getAttribute('v-scroll2-manually')) {
vnode.context.$nextTick(() => {
el.scrollTop = el.scrollHeight - el.clientHeight
})
}
}
}
}
...
}
</script>

  

vue 实现聊天框滚动到底的更多相关文章

  1. Vue聊天框默认滚动到底部

    功能场景 在开发中,我们总能遇到某些场景需要运用到聊天框,比如客服对话.如果你不是一名开发人员,可能你在使用QQ或者聊天工具的时候并没有注意到,当你发出一条消息的时候,窗体会默认滚动到最底部,让用户可 ...

  2. 【转】关于FLASH中图文混排聊天框的小结

    原文链接 图文混排也是FLASH里一个很古老的话题了,我们不像美国佬那样游戏里面聊天框就是聊天框,全是文字干干净净,也不像日本人发明了并且频繁地使用颜文字.不管是做论坛.做游戏,必定要实现的一点就是带 ...

  3. problem: 记一次聊天框的表情包弹框不显示的找问题过程

    左边是列表,包含了群和成员,右侧是聊天窗口.点击群列表,右侧显示群聊窗口,点击学员,右侧显示私聊窗口. 群聊窗口和私聊窗口是不同的组件,但是窗口中的子组件,例如窗口的头部.中间内容部分.输入框都是复用 ...

  4. WPF仿QQ聊天框表情文字混排实现

    原文:WPF仿QQ聊天框表情文字混排实现 二话不说.先上图 图中分别有文件.文本+表情.纯文本的展示,对于同一个list不同的展示形式,很明显,应该用多个DataTemplate,那么也就需要Data ...

  5. UWP开发之控件:用WebView做聊天框

    目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...

  6. 只用js 实现的简约聊天框

    之前看到别人的网页打开后都有个聊天框,可以与同时在网上的网友聊点简单话题,于是便找了个最简单的方法 使用js,客户端 打开页面,不断的给服务器发送请求来得到 新的消息 用JavaScript实现的轮询 ...

  7. 超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效

    这是一款很有创意的HTML5 SVG聊天框拖拽弹性摇摆动画特效. 用户能够用鼠标点击或用手滑动聊天框上的指定区域,该区域会以很有弹性的弹簧效果拉开聊天用户列表.点击一个用户头像后.又以同样的弹性特效切 ...

  8. QQ聊天框变成方框口口口口的解决办法

    QQ聊天框变成方框口口口口的解决办法 安装了QQ拼音输入法6.0之后,发现 QQ聊天对话框好友名称变成框口口口口口,网上没有找到办法,卸载轻聊版,安装完整版9.03之后,再次启动就好了.

  9. vue+betterscrool实现横向弹性滚动

    如何利用better-scroll在vue中实现横向滚动,并且滚动到两端以后会有弹性效果 1.使用npm下载better-scroll 2.按需引入better-scroll 3.需要2个盒子装起来组 ...

随机推荐

  1. Android典型界面设计(7) ——DrawerLayout+Fragement+ViewPager+PagerTabStrip实现双导航

    一.问题描述 在Android典型界面设计(3)的我们实现了双导航效果,即外层底部导航和内部区域的头部导航,如网易新闻等很多应用采用了这种导航,但Google提供DrawerLayout可实现抽屉式导 ...

  2. OAuth 2和JWT - 如何设计安全的API?

    OAuth 2和JWT - 如何设计安全的API? Moakap译,原文 OAuth 2 VS JSON Web Tokens: How to secure an API 本文会详细描述两种通用的保证 ...

  3. REP开发技巧

    这个基本包含了所有的特殊情况 wrap 换行 title显示在每页的固定位置, 第一页需要特殊处理 <DATA> <PDF_TITLE Font="5" Size ...

  4. 外网IP监测上报程序(使用Poco库的SMTPClientSession发送邮件)

    目录 IPReport 项目介绍 编译说明 安装使用说明 获取外网IP方式 邮件发送关键代码 IPReport 代码地址https://gitee.com/solym/IPReport 项目介绍 外网 ...

  5. Spark 论文篇-RDD:一种为内存化集群计算设计的容错抽象(中英双语)

    论文内容: 待整理 参考文献: Resilient Distributed Datasets: A Fault-Tolerant Abstraction for In-Memory Cluster C ...

  6. H5的Video事件,控制方法,及监听

    1.标签基本属性 src :视频的属性 poster:视频封面,没有播放时显示的图片preload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视 ...

  7. VisualSVN Server 配置和使用

    以前使用官方Subversion搭建SVN版本控制环境,很繁琐.在Windows 系统上,要想让它随系统启动,就要封装SVN Server为windws service,还要通过修改配置文件来控制用户 ...

  8. ThinkPad T420 Fn+F5

    关于F5,可做如下设置:     1)官网win7系统下载SIhotkey[8jvu39ww].exe:最新版本的我没测试,应该也可以用.     2)双击安装,并按程序安装,直到要你选择安装on s ...

  9. Android Launcher分析和修改4——初始化加载数据

    上面一篇文章说了Launcher是如何被启动的,Launcher启动的过程主要是加载界面数据然后显示出来, 界面数据都是系统APP有关的数据,都是从Launcher的数据库读取,下面我们详细分析Lau ...

  10. 施工测量中Cad一些非常有用的插件

    经常会遇到坐标在cad中批量展点.从cad中批量保存坐标点.导入cad中的坐标怎么才能有点号,怎么快速标注cad里的坐标点··· ··· 这一切都是可以程序化的,cad是可以二次开发的,我经常用易语言 ...