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

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

创新互联公司成立与2013年,是专业互联网技术服务公司,拥有项目成都网站建设、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元阿瓦提做网站,已为上家服务,为阿瓦提各地企业和个人服务,联系电话:13518219792

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

这个问题是很早之前遇到的,后来想来,其实是个很简单的问题。在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();
 }
 });
}

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


名称栏目:vueJs实现DOM加载完之后自动下拉到底部的实例代码-创新互联
分享路径:http://pwwzsj.com/article/cddpso.html