使用ElementUI走马灯Carousel组件加载慢的解决方案

  项目中使用ElementUI的走马灯组件Carousel时，发现组件渲染速度比较慢。一开始以为是后台接口处理速度慢，在后台统计了方法执行时间后发现很快。于是猜想是因为数据量太大，Carousel渲染速度就会比较慢。查阅ElementUI官方文档发现走马灯并不支持懒加载，所以就尝试了自己实现懒加载。思路是先只获取第一页和第二页的数据，然后用户点击切换的时候，再一页一页加载。改完之后debug时发现，只要组件绑定的data改变了，那么就会触发vue的重新渲染，走马灯又会回到第一页，遂放弃此法。后考虑弃用走马灯组件，使用分页的思想，只加载一页的信息，用户点击切换后，再获取目标页的数据，这样一次只展示一页，大大加快了反应速度。页面上只需要并排展示三个div，然后左右画两个箭头，并在箭头上绑定切换页面事件。每次切换前台传给后台一个页数，后台利用页数来分页查询数据。代码因项目而异，这里就不赘述了。