vueJs实现DOM加载完之后自动下拉到底部的实例代码


Posted in Javascript onAugust 31, 2018

这篇文章给大家介绍vueJs实现DOM加载完成之后自动下拉到底部,文中给大家记录了整个问题的过程,对实现思路感兴趣的朋友大家阅读下本文。

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

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

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

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

工作项目是基于vueJs框架的,遇到一个需求:有一组件,在创建时会通过ajax向服务器请求一组数据,以列表形式展示出来,并且自动下拉到底部。

实现思路:首先弄清楚vueJs组件的生命周期,如下图。发完发现图不见了...这里貌似不能放图,就是vueJs生命周期和钩子,读者自行百度一下吧,到处都是。

具体细节不做介绍,自行看图或者右转官网查找http://cn.vuejs.org/

知道了生命周期,再对应需求,很自然地关注三个时期beforeCreate,mounted,updated.

1. beforeCreate时期

此时期相当于做一些初始化工作,此时做ajax最合适。代码如下:

beforeRouteEnter(to, from, next) {
 next(function(vm) {
 if (vm.dataList.length == 0) {
  //此处实现ajax
  vm.getVersionInfo();
 }
 });
}

代码是之前写的,使用的beforeRouteEnter钩子(vm:因为此时该组件可能还未创建,所以不能用this,而用vm代替,vm所执行代码会在其创建之后执行。),这个钩子会在每次通过vue-route路由进入组件页面前调用,而需求是只有第一次进入需要自动执行ajax,因此还做了判断data是否长度为0,而在写博的时候发现,如果使用beforeCreate钩子应该就不会有这么多麻烦,不过也仅仅是猜测,使用请自行验证。

2. mounted时期

此钩子会在模板(html)编译完成并挂载后调用,最开始我想的是,在这里实现一个自动滚动到底部的操作,但是发现不行。为什么呢?因为ajax是异步操作,在beforeCreate时期执行了ajax,并不能保证在mounted时,数据已经传回,所以此时做下拉操作没有意义。

3 updated时期

此钩子在组件对象data数据发生变化时,而我在ajax的success回调函数里会改变data,所以此时调用应该是很合适的。然而,实现之后又出现了问题,每次自动下拉滚动到底部只能下拉滚动到data原列表的最底部,而新添加的项还在下面。举例来说

4(ajax新获取)

每次updated处执行ajax下拉操作自动下拉滚动,只能会到4,而不是5的位置。究其原因,原来是因为updated是执行时,打他只是data改变,而有可能document并没有渲染完成,从而导致,不能处理新添加的项,而偏偏vue并没有提供渲染完成的钩子。

在网上锁了搜了很多资料,一些资料,比较靠谱的是设置一个延迟,setTimeout(),但是这样页面会有明显的一个跳动柑橘感觉闪动,影响用户体验,而我的处理是:

updated() {
 let count = 0;
 let interval = setInterval(() => {
  if (count > 3000) {
  clearInterval(interval);
  this.isFirst = false;
  }
  count++;
  if (document.body.scrollHeight != document.body.clientHeight) {
  document.body.scrollTop = document.body.scrollHeight;
  if (document.body.scrollTop == document.body.scrollHeight-document.body.clientHeight) {
   clearInterval(interval);
   this.isFirst = false;
  }
  }
 }, 0);
}

这个原理应该很简单,看代码应该能看明白。

总结

以上所述是小编给大家介绍的vueJs实现DOM加载完之后自动下拉到底部的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
js实现AI五子棋人机大战
May 28 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Angular2中监听数据更新的方法
Aug 31 #Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 #Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 #Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 #Javascript
Vue.directive使用注意(小结)
Aug 31 #Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 #Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 #Javascript
You might like
我的论坛源代码(四)
2006/10/09 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
经济管理专业自荐信
2013/12/30 职场文书
总经理岗位职责描述
2014/02/08 职场文书
买房子个人收入证明
2014/10/12 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
大学运动会通讯稿
2015/07/18 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
解除合同协议书范本
2016/03/21 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis