? ? ? 项目中需要做一个滚动到底部加载更多数据的效果，前端用的框架是element-ui，第一反应是去查看说明文档，”InfiniteScroll 无限滚动“几个大字自带光环映入眼帘，心中一阵窃喜，按照实例一顿操作猛如虎，事实证明照搬一时爽，调试毁终身。??

第一个不符合预期的就是，并没有如文档上说的是滚动到底部再加载更多数据，而是一次性请求完所有页码。

一直不停的加载

这个有点上头......网上找了很多资料最后对比demo的css发现，区别在于滚动的容器没有固定高度，于是我当机立断当加上高度，奇迹出现了，终于不再无限加载......随之而来有了新的问题。

对加了v-infinite-scroll="load" 的命令的容器设置高度

这里卑微的我有个小小的建议，官方文档是不是可以加一个注意事项。

? ? ?第二个问题就是页面初始化后，再点击搜索，数据接口只请求一次了，不再把容器填满，滚动也不再加载数据了，心噻......,秉着有问题找度娘的精神，我翻江倒海的找啊找，竟然没有发现跟我雷同的问题，但是有个问题让我印象深刻，有个朋友是说从详情页切换回到列表页的时候，发现数据无限加载，滚动失效之类，把v-if改成v-show就医好了，v-if不会保留dom结构所以初始化会失败，但是我这里并没有设置v-if啊啊啊，但是我“初始化”这几个字深深的留在我的脑海中，不管三七二十一我注释了一行跟初始化有关的代码。哈哈，先附上最终html结构代码，

html结构

其中，dataList是每页请求数据concat而来的，所以每次搜索的加载新数据的时候，我都要对dataList做清空处理。当我把dataList=[]这行代码注释掉，再测试的时候，奇迹出现了，滚动加载一切正常，不正常的是数据，当然这个是在情理之中的。太惊喜太意外了，有没有，其实这个不难理解，我做搜索操作的时候修改了dataList的长度，但是滚动条的位置却没有更改，所以难怪会失效，本身这个效果的原理就比较简单的。既然页面初始化的时候是正常的，那我何不在搜索的时候模拟一个同样的场景，一不做二不休，干脆对容器来个初始化，加个v-if，就是这个小小的不经意的举动问题完美解决。有时候就是这样的，山穷水尽疑无路，柳暗花明又一村。说实话，v-if真的帮我解决了不少不好描述的问题的，有时间再聊......