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 相关文章推荐
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
Augularjs-起步详解
Jul 08 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 Javascript
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
php学习笔记之 函数声明(二)
2011/06/09 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
js获取ip和地区
2017/03/10 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
django 常用orm操作详解
2017/09/13 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
如何理解Python中包的引入
2020/05/29 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
4S店收银员岗位职责
2015/04/07 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android