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 smipleChart 简单图标类
Jan 12 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 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调用c接口无错版介绍
2014/03/11 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
php面向对象值单例模式
2016/05/03 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
params有什么用
2016/03/01 面试题
员工评语大全
2014/01/19 职场文书
父母对孩子的寄语
2014/04/09 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript