vueJs实现DOM加载完成之后自动下拉到底部
来源:互联网 发布:网络信号转换器 编辑:程序博客网 时间:2024/05/29 17:46
/..............................................................................................更新.................................................................................................../
这个问题是很早之前遇到的,后来想来,其实是个很简单的问题。在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原列表的最底部,而新添加的项还在下面。举例来说
1
2
3
4
5(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加载完成之后自动下拉到底部
- vueJs实现DOM加载完成之后,调用js
- 页面下拉到底部自动加载更多
- 探索SwipeRefreshLayout配合自定义ListView完成下拉刷新、滑到底部自动加载更多
- Android LRecyclerView实现下拉刷新,滑动到底部自动加载更多
- Android LRecyclerView实现下拉刷新,滑动到底部自动加载更多
- Android LRecyclerView实现下拉刷新,滑动到底部自动加载更多
- Android LRecyclerView实现下拉刷新,滑动到底部自动加载更多
- Android LRecyclerView实现下拉刷新,滑动到底部自动加载更多
- Android PullToRefresh下拉到底部自动加载下一页
- JS实现页面加载完成之后自动刷新一次
- Android 下拉刷新框架实现、仿新浪微博、QQ好友动态滑到底部自动加载
- Android 实现ListView滚动到底部自动加载数据
- +js实现分页浏览到底部自动加载
- 网页下滑到底部之后加载更多
- Android下拉刷新、滚动到底部自动加载更多RecyclerView组件
- jquery DOM加载完成之后立即执行js事件
- XRecyclerView:实现下拉刷新、滚动到底部加载更多以及添加header功能的RecyclerView
- Disruptor(无锁并发框架)-发布
- Windbg调试命令详解
- 运用递归函数来转化进制
- Fastlane的黑魔法:一键打包编译上传 AppStore
- cocoaPods安装与使用
- vueJs实现DOM加载完成之后自动下拉到底部
- 利用分段式深度解决特效重复叠加的问题
- 图片的三级缓存
- solr入门之参考淘宝搜索提示功能优化拼音加汉字搜索功能
- 宏定义头文件
- Python学习,Day4
- Disruptor 框架源码分析
- java中常用的几种排序算法--常见笔试面试
- R语言——中文乱码