vueJs实现DOM加载完成之后自动下拉到底部

最新推荐文章于 2024-06-05 15:29:12 发布
最新推荐文章于 2024-06-05 15:29:12 发布
阅读量3.3w 收藏 11
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014445339/article/details/54929475
版权

/..............................................................................................更新.................................................................................................../

这个问题是很早之前遇到的，后来想来，其实是个很简单的问题。在dom记载完成就自动下拉到底部，只需要使用Vue.nextTick(() => {})函数即可，因为vue是虚拟dom，不会实时更新dom，nectTick()就是注册在下一次更新dom之后的回调。

而再看我的问题，其实之所以出现那样的问题，就是ajax的异步执行的问题而已。

/..............................................................................................更新完......................................

最低0.47元/天 解锁文章
_小刀
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
（亲测可用）vue新消息自动滚到底部
weixin_44563906的博客
09-02 1559
mounted () { this.scrollToBottom(); }, //每次页面渲染完之后滚动条在最底部 updated:function(){ this.scrollToBottom(); }, methods: { // scrollToBottom() { this.$nextTick(() => { var co...
vue 滚动条直接滚动到最底部
weixin_49511142的博客
01-17 1471
2.如果是需要等待数据渲染完成之后再滚动到最底部的，注意在数据获取后再去获取dom，1.务必查看清楚你的滚动条是属于哪个dom的，不然获取错了是不会有效果的。是一个很好的选择，同时搭配。
[Vue3] 滚动条自动滚动到底部
最新发布
Supposelll的博客
06-05 679
在一个区域会依次打印log，随着log的加长，出现滚动条，而滚动条应该始终保持在最下方。点击回到顶部按钮，可以使滚动条回到最上方。
vue中使滚动条默认停留在底部
qq_59599812的博客
09-15 1207
（元素内容高度），css样式也要设置好。获取dom元素，使用。
js实现页面或DOM元素平滑滚动
V_AYA_V的博客
12-29 2038
在前端开发页面的工作中，经常会遇到点击导航栏页面滚动到某一指定区域的需求，直接使用window.scroll或者window.scrollTo方法可以实现该需求，但是现实场景中我们希望滚动更加平滑，并且我们希望不仅仅是window能滚动，在某一个设置了overflow-y:scroll属性的div中也能滚动到某一位置。在此，我们以在vue中的实际场景为例： 1.window.requestAnimationFrame() window.requestAnimationFrame() 告诉浏览器——你希望.
html 自动滚动到底部,原生js使dom自动滚动到最底部
weixin_34976470的博客
05-31 1162
要实现一个聊天发言自动滚到底部的功能。直接上代码var ele = document.getElementById('id');ele.scrollTop = ele.scrollHeight;获取到对应的dom,设置dom的scrollTop为元素的scrollHeight即可.但我这里有一个问题，用的是vue。就是每次Push进数组数据，然后滚动，总是少一条数据的高度。sendMsg() {t...
vueJs实现DOM加载完之后自动下拉到底部的实例代码
10-18
主要介绍了vueJs实现DOM加载完成之后自动下拉到底部的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
原生JS实现DOM加载完成马上执行JS代码的方法
12-10
这时，我们可以利用原生JavaScript实现DOM加载完成即刻执行的JS代码，避免不必要的延迟。 `jQuery`提供了`$(document).ready()`方法，它在DOM准备就绪时执行，但为了不依赖整个jQuery库，我们可以模仿其工作原理来...
基于javascript实现浏览器滚动条快到底部时自动加载数据
10-23
总的来说，基于JavaScript实现的滚动到底部自动加载数据是一种常见的优化用户体验的技术，它减少了用户手动翻页的次数，提高了浏览效率。无论是使用jQuery还是原生JavaScript，核心思路都是监听滚动事件，判断滚动条...
获取dom元素，监听dom滚动条到底部的方法
陈先生的博客
04-27 601
【代码】获取dom元素，监听dom滚动条到底部的方法。
VUE 滚动到底部加载更多（附带指令实现方式）
九日的博客
01-22 6917
VUE 滚动到底部加载更多（附带指令实现方式）
vue3 h5进入页面后自动滚动到底部
qq_58340302的博客
03-30 2798
在做h5项目中的聊天页面时，需求是进入页面自动滚到底部，方便用户看到最新消息（因为消息是正序排列的，最新消息自然展示在底部）。
dom：原生js使div滚动到最底部
weixin_30786617的博客
02-28 1924
今天脑子短路，对没有出现滚动条的div疯狂操作～ const dom = document.querySelector(".scroll"); dom.scrollTop = dom.offsetHeight; 转载于:https://www.cnblogs.com/gaollard/p/10451368.html...
JS/JQ实现滚动调默认最底部
热门推荐
acm765152844的博客
03-09 1万+
1、让scrollTop（滚动条的垂直位置）== $("tbody").height()元素的高度(常用) JS：div.scrollTop = div.scrollHeight; JQ：$("#cAaddtable tbody").scrollTop( $("#cAaddtable tbody").height() ); 2、让最后一个元素一直在可视界面中 scrollIntoVie
vue方法加载和dom更新的时间段
weixin_48811255的博客
04-09 614
执行nextTick：在Watcher的update方法内部，会执行nextTick：在Watcher的update方法内部，会执行nextTick，将清空Watcher队列的方法加入到微任务队列中。但注意，此时还没有开始渲染模板，所以不能访问DOM元素。这是挂载阶段，Vue实例已经挂载到DOM上，此时可以访问DOM元素，并且如果组件需要与后端进行交互，通常在这个钩子函数中进行。在组件的整个生命周期中，还有其他如updated、beforeDestroy等阶段，这些阶段也会根据需要进行方法的调用和处理。
vue核心之真实DOM页面渲染过程和虚拟DOM(vdom)、Diff算法
muzidigbig的博客
02-23 2871
vue核心之虚拟DOM(vdom)与真实DOM页面渲染过程 一、真实DOM和其解析流程？ 浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。 第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。 vue2与vue3中diff算法的区别
Vue 组件内滚动条 滚到到底部
weixin_30808575的博客
06-21 1212
因为在vue中，某个组件内 使用scrollTop赋值 滚动条没有变化 使用scrollTo 也不行(window.scorllTo 或者dom.scrollTo) 所以可以考虑使用投机取巧的办法: 利用在指定位置添加一个div 然后通过div.scrollIntoView() 滚动到这个div <div class="position-box"></div> ...
关于vue滚动到底部刷新数据
dongheng123的博客
11-30 2818
滚动到底部刷新数据
vue，组件DOM加载完成的事件是什么
07-13
在中，组件DOM加载完成的事件可以通过`mounted生命周期钩子来处理。`mounted`钩子会在组件的根元素被挂载到DOM后被调用，表示组件已经被渲染并且可见。 你可以在组件的选项中定义`mounted`钩子函数，例如： ```javascript Vue.component('my-component', { mounted() { // 在组件DOM加载完成后执行的逻辑 console.log('组件DOM加载完成'); } }); ``` 在上述例子中，当`my-component`组件被挂载到DOM后，`mounted`钩子函数会被调用，并输出"组件DOM加载完成"的消息。 需要注意的是，`mounted`钩子函数只会在组件初始化时触发一次。如果需要在每次组件更新后执行逻辑，可以考虑使用`updated`钩子函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值