vue动态获取数据让最后一条数据展示在页面中

最新推荐文章于 2023-05-22 07:30:00 发布
最新推荐文章于 2023-05-22 07:30:00 发布
阅读量872 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59930878/article/details/119954536
版权
这个博客内容描述了如何在模拟聊天应用中实现新消息自动滚动到屏幕底部的功能。通过使用Vue.js的$nextTick方法确保DOM更新后，获取页面内容区域并设置其滚动位置为scrollHeight，从而达到始终显示最新消息的效果。
摘要由CSDN通过智能技术生成

相当于模拟一个聊天的窗口，新增的一条数据总是显示在屏幕中

scrollToBottom {
    this.$nextTick(() => {
        let container = thid.$el.querySelector('.page-content')
        containter.scrollTop = containter.scrollHeight
    })
}
前端小菜机
关注
专栏目录
vue填坑系列之将返回来的对象其中一项追加到末尾
xuxinwen32的博客
05-05 1035
具体需求如下表所示，后台返回一个键值对的对象，其他是后台已经存入的数据，不方便改，但是前台在做渲染的时候要把其他放到键值对的末尾再进行渲染，所以就需要对后台返回过来的数据做处理，具体操作如下： 具体代码如下： this.form.spaceTypeData = response.data; // console.log(this.form.spaceTypeD...
vue 最后一条数据 获取for,VUE：v-for获取列表前n个数据、中间范围数据、末尾n条数据的方法...
weixin_32028739的博客
03-27 2553
说明：1.开发使用的UI是mintUI,要求：1.获取6到13之间的数据：items.slice(6,13) 2.获取小于0到6之间的数据：(两种)a：items.slice(0,6) b：v-if="index < 6" 3.获取最后6条数据：items.slice(items.length-6,items.length) ...
获取数组最后一项内容
weixin_41929274的博客
01-21 5361
财务报表的页面逻辑会涉及到试算平衡这一个功能,他是取表格数据的最后一项中的字段内容进行比较,来计算 方法一: let arr = this.tableData[this.tableData.length - 1] 方法二: 利用数组方法pop,删除数组最后一项,由于我的项目是用vue做的,用pop之后,页面的数据会少一行,没错,就是最后一行,所以,谨慎使用 let arr = thi...
vue中 快速输入时 获取最后一次接口返回值
不积跬步何以至千里
04-22 996
分页查询时 有多个Input搜索框 为了用户体验 分页查询时用了@on-change事件 也就是说 每做一次操作 就会调用后端分页查询接口 此时出现一个问题 在快速输入的时候 最后一次返回的值被前面的请求结果给覆盖了 由于@on-change事件缘故 第一次传参是1(图一 最后一次是12 (图二 此时很明显看到 后端没有任何问题 但前端显示的效果是图二的返参数 解决方案 给分页接口加延时 setTimeout(() => {}, 1000); // 分页显示数据 /****************
Vue 中如何根据当前屏幕宽度动态计算某个属性的值
编程洪同学
05-22 426
在这个修改后的代码中，multipleSize 的初始值为 0，然后在 mounted 生命周期钩子函数中计算屏幕宽度并赋值给 multipleSize。【解决】要动态计算 multipleSize 属性的值，可以在 Vue.js 的 mounted 生命周期钩子函数中访问屏幕宽度，然后将其除以 3，将结果赋给 multipleSize 属性。【需求】控制 multipleSize 属性，根据屏幕宽度动态计算并赋值，值为当前屏幕宽度的三分之一。🧑🏻‍🏫 一位高冷无情的编码爱好者。🧕🏻 擅长设计的剪辑师。
ListView 显示(数据变化后滚动到)最底部。 (转载)
sj6O71的专栏
10-16 366
想要实现一个listview初始化时和数据变化后显示到列表的最末，简单地说就是像聊天窗或者是日志输出那样的情景。开始没去仔细看listview对象的属性，按照惯性思维就去 调用 listView.scrollTo(offset_x,offset_y);然后又被一篇奇怪的日志误导了什么外层容器和 内层两个view ...干！浪费我时间。其实listView元素直接在xml里就可以简单定义实现好这个效...
vue实现动态添加数据滚动条自动滚动到底部的示例代码
01-19
在使用vue实现聊天页面的时候，聊天数据动态加到页面中，需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的，报错...
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
01-21
1.问题描述：在echarts弹框中嵌入echarts，在页面数据改变时，echarts视图不更新； 2.解决办法： 数据更新时以为drawLine()函数在updated()里面执行（这种情况之前碰到过），后来发现热更新之后视图更新了，所以跟...
Vue.js 实现数据展示全部和收起功能
10-18
在Vue.js中实现数据展示全部和收起功能是一项常见的需求，尤其在处理大量列表数据时。这个功能使得用户能够高效地浏览信息，同时保持页面整洁。以下是一个详细步骤的介绍，帮助你理解如何使用Vue.js来实现这一功能。...
Vue开发：vue中如何获取指定月份的最后一天/时间选择器选择指定月份后如何获取它的最后一天
Forest_2Cat的博客
06-11 2546
问题描述： Vue页面的时间选择器选择指定月份，查询数据库的url需要参数为：开始时间 、结束时间 查询结果为这个时间范围内的所有数据 因此需要获得选择的月份的最后一天的最后一秒 如：选择月份为2021年6月， 则生成的开始时间为2021-06-01 00:00:00 结束时间为2021-06-30 23:59:59 那么怎么获得这个结束时间呢？ 解决办法： Step1： 先在项目中安装 ‘moment-timezone’ 依赖 Step2： 导入依赖 import moment from 'momen
vue中面包屑的动态数据步骤
yeyeye5017的博客
02-12 342
【代码】vue中面包屑的动态数据步骤。
vue实现动态查询，查询字段以及类型由后端返回，展示的表格字段也由后端控制
Z_Joker_J的博客
06-05 2362
需求： 因为需求变更快，需要经常增加查询字段，更改较为麻烦，因此需要做一个通用的动态查询组件，每次变更不由前端控制，而是修改配置文件即可。 一、动态查询 解决思路： 定好前端需要的几种查询类型，返回格式，以及默认数据等等，利用前端的基础24 分栏布局开发一个通用的组件。 实现效果如图： 除了查询按钮外，其余数据，包括查询条件的位置全由后端控制。 功能拓展： 该组件同样可以用于其他地方，比如动态展示详情页面，由后端返回详情页面需要展示的key、val...
vue+vite获取git信息
m0_63685551的博客
05-06 850
vue+vite中获取git信息
tsx（VUE3,ts,JSX）聊天框（下拉刷新）将最新列表的最后一条信息显示在当前第一条信息的前面
qq_45031347的博客
08-19 445
重要的内容都标红显示了
vue3聊天定位到最下面
yun_shuo的博客
08-25 2260
vue3聊天定位到最下面 在vue中做聊天功能时,消息模块通常是固定高度后设置overflow:auto;但当消息过多后,会产生滚动条,这时将消息默认定位到底部可以利用scrollIntoView()方法。关键代码如下； nextTick(() => { chatRoom.value.lastElementChild.scrollIntoView() }) scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。 nextTick()是将回调
vue 移动端 光标定位到最后一位
Man_12345的博客
08-18 1501
最近公司做移动端，用手点击时光标定位到最后一位。 具体代码 这是使用v-for循环的列表，当时van-field并没有id，需要手动添加 id(后端请求回来数据带有id). <van-field :id="item.id" :key="item.columnId" v-for="item in detailColumns" v-model="editForm" @focus="handleFocu..
【项目实战经验】vue的动态路由实现对应面包屑动态值显示
New前端工厂的博客
06-16 1754
一开始我想的思路就有问题，总想着用动态的路由对应唯一面包屑，这是不对的，应该用动态的路由，对应动态的面包屑，只要相互有对应的动态值就可了。以我自己做的一个地图下钻到列表为例， 需求:再点击一个地图时，进入对应省的列表，并且面包屑显示某某省的什么。 所以废话不多说，开始干 先是使用地图。这个步骤我就忽略了，因为我有一篇这个文章 使用第三方地图 点击这个就可以到我下一个文章了。 现在地图有了，就是对应的路由了，我是这样处理的。 ...
vue 实现聊天界面消息递增永远查看最后一条
空城三梦
11-06 1355
每次发消息的时候右侧滚动条会随着消息的发送显示最后一条 在html中需要滚动的框区域用ref='record' //在生命周期updated时，改变并且要在页面重新渲染完成之后 updated() { this.$nextTick(() => { this.$refs.record.scrollTop = this.$refs.record.scrollHeight }) }, 另有一条需要特别注意的地方，注意查看信息调用的接口刷新频率，在...
Vue 回到顶部按钮 完整代码在最后
D_evin_的博客
12-03 878
HTML代码 <template> <div> <a href="#top" target="_self" id="top-btn"> <img src="/images/返回顶部.png" alt /> </a> </div> </template> 图标在阿里巴巴矢量图标库：https://www.iconfont.cn/home/index?spm=a313x.77810..
vue中根据数据里面的开始时间和结束时间展示一条横线在页面上
最新发布
05-27
你可以在 Vue 中使用 template 和 computed 来根据数据中的开始时间和结束时间展示一条横线在页面上。具体实现步骤如下： 1. 在数据中定义开始时间和结束时间： ``` data() { return { startTime: new Date("2021-09-01 09:00:00"), endTime: new Date("2021-09-01 18:00:00") } } ``` 2. 在模板中使用 canvas 元素来展示横线： ``` <template> <div> <canvas ref="canvas" width="500" height="50"></canvas> </div> </template> ``` 3. 在 computed 中计算出横线的长度： ``` computed: { lineWidth() { const canvas = this.$refs.canvas; const timeDiff = this.endTime - this.startTime; return timeDiff / (1000 * 60 * 60 * 9) * canvas.width; } } ``` 4. 在 mounted 中使用 canvas API 画出横线： ``` mounted() { const canvas = this.$refs.canvas; const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(0, canvas.height / 2); ctx.lineTo(this.lineWidth, canvas.height / 2); ctx.strokeStyle = "red"; ctx.lineWidth = 5; ctx.stroke(); } ``` 这样，就可以根据数据中的开始时间和结束时间展示一条横线在页面上了。注意，在 mounted 中使用 canvas API 画出横线，因为 canvas 元素需要渲染到页面上才能获取宽度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值