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

这篇文章给大家介绍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();
 }
 });
}

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