功能场景

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

实现原理

通过每一次的数据变化,只要数据变化,将滚动的最大高度赋值给滚动条的最大高度。

scrollHeight:滚动条高度

scrollTop: 距离最顶部高度

实现过程

在vue中

<!-- 这是一个简易的范例,重点突出自动滚动底部 -->
<template>
<div>
<!-- 聊天窗体 -->
<div class="test" id="gundong"></div>
<!-- 输入窗体 -->
<el-input></el-input>
<!-- 确认按钮 -->
<el-button @click="take">发送</el-button>
</div>
</template>
<script>
export default {
name: 'scroll',
data () {
return {
chat: [
{info: '聊天内容,触发后push一个'}
]
}
},
methods:{
take () {
let info = {info: '聊天内容,触发后push一个'},
this.chat.push(info)
// 核心代码
// 滚动
this.$nextTick(() => {
let msg = document.getElementById('gundong') // 获取对象
msg.scrollTop = msg.scrollHeight // 滚动高度
})
}
}
}
</script>
<style scoped>
.test{
width:300px;
height: 300px;
overflow: auto;
}
</style>

核心内容

this.$nextTick(() => {
let msg = document.getElementById('gundong') // 获取对象
msg.scrollTop = msg.scrollHeight // 滚动高度
})

了解一下$nextTick

$nextTick的执行条件是在DOM发生变化并且结束之后执行的一次回调。

vue在响应数据变化的时候并非在数据变化时DOM马上变化,而是按照一定的生命周期进行进程进行变化的。

如果你用watch,你会发现,永远只能监听到最近的一条聊天记录之上。似乎监听不到数据变化。其实并不是,在watch是直接监听data数据的变化情况,快于DOM,所以先行执行watch了。

那如果加上$nextTick的话,就能够等到DOM变化完成之后再进行执行,有点类似timeout

了解一下“scrollTop”and“scrollHeight”

scrollTop是滚动条的当前高度。默认是0

scrollHeight是滚动条的整体高度

只要动态修改滚动条到顶部的距离等于div的高度,那么久实现滚动条定位在底部了。

Vue聊天框默认滚动到底部的更多相关文章

  1. vue 判断页面是否滚动到底部

    需求 要求用户阅读完本页所有内容后,下一步按钮才可以点击. 实现思路 通过判断当前页面是否到达底部来设置按钮的点击事件. 要判断当前页面是否到达底部需要用到三个距离--距离顶部的距离scrollTop ...

  2. 移动端页面 弹出框滚动,底部body锁定,不滚动 / 微信网页禁止回弹效果

    需求:页面有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动.加上滚动后,底部body的滚动事件如何禁止,加上了overflow:hidden;还是不可用. 如下图:地区弹出框可以滚动,而底部的b ...

  3. 在element-ui的select下拉框加上滚动加载

    在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一 ...

  4. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  5. 元素滚动到底部或顶部时阻止body滚动

    移动端的弹窗内容有滚动条,滚动到底部或顶部时或影响弹窗下的body滚动,某些浏览器滚动到顶部时不松手就触发了刷新页面的情况,如果不需要这样的默认体验,就需要加一下判断了. var startX,sta ...

  6. Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例

    一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emo ...

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

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

  8. 安卓使ScrollView滚动到底部代码

    在开发中,我们经常需要更新列表,并将列表拉倒最底部,比如发表微博,聊天界面等等, 这里有两种办法,第一种,使用scrollTo(): public static void scrollToBottom ...

  9. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

随机推荐

  1. mybatis 关联表心得

    1,例如订单表与用户表的关联,一个订单对应一个用户,这是一对一关联: 用代码实现是这样: A(用resultType去实现的话,如下) 1,使用到继承, OrderUser extend Order{ ...

  2. 状态开关(ToggleButton)

    状态开关(ToggleButton): 常用属性:isChecked(是否被选中,如true) 监听:1.监听方法:setOnCheckedChangeListener 2.监听器:CompoundB ...

  3. BaseActivity合集

    1.出自“高仿京东商城”: package com.itau.jingdong.ui.base; import com.itau.jingdong.AppManager; import com.ita ...

  4. forkjoin框架疑问记录

    今天在看jdk1.7的forkjoin框架时候,里面有个例子如下: product类: public class Product { private String name; private doub ...

  5. Windows Azure系列公开课 - 第二课:为什么选择Windows Azure(下)

    Windows Azure中有什么? |基础结构 Windows Azure能够根据您企业的需求提供最适合的基础结构,并且在业务发展或精简时能够根据变化的需求及时的做出改变.您可以将Windows A ...

  6. sql语句 查询分组后的每组的第一条或最后一条数据

    select * from(select row_number() over(partition by IDCARD order by DATATM desc) as rownum,* from (S ...

  7. HTML学习---HTML状态码

    301 Moved Permanently 永久移动.请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI.今后任何新的请求都应使用新的URI代替302 Found ...

  8. Asp.Net MVC Identity 2.2.1 使用技巧(八)

    一.添加管理链接 在View/Shared/_layout.cshtml,在页面导航上(28行)添加如下代码: @*通过身份验证并确认用户属于Admin角色显示管理菜单*@ @if (Request. ...

  9. Git在eclipse中的配置

    1:git在eclipse中的配置 windows - >preferences->team->git->configuration 点击add Entry key值:输入 u ...

  10. 深入浅出SharePoint——常用的url命令

    ?&displaymode=design  页面可编辑