关于首页轮播图显示最后一张图的问题

Question

老师，7-9这一课里，有一段我不太明白，为什么Swiper.vue里的swiper组件需要判断list的length；而Icons.vue里的swiper组件就不需要判断list.length，Icons不判断length，图标组也是正常显示第一页的，这两块有什么不同点吗？

Answer 1

Dell 2018-07-29 11:49:42

其实icons也应该判断下length，但是实际上，但你有swiper的时候，icons的length就一定不为0了

• 提问者 qq_温故知新_0 #1

  学生愚笨，表示还不理解；我主要不明白，那个Swiper.vue里的swiper组件不判断list的length的时候，图片轮播就直接显示最末页；按这个道理的话，Icons.vue里的swiper组件不加判断，也应该显示icons集的最末页啊，实际上不是，难道前者是直接传递了list，后者是，经过了计算属性，处理了list，并返回pages，是因为两者程序运行的时间长短不同的原因吗？

• Dell 回复 提问者 qq_温故知新_0 #2

  你先继续听，听完了回头再听一遍这块的内容估计就懂了。出这个问题的原因是，一开始加载的时候swiper没有内容，之后数据更新，swioper有了内容才产生的。加了length的判断，可以确保swiper在有数据后被渲染，就不会有问题了。icons在swiper里面，渲染的时候一定是有数据的。

• 提问者 qq_温故知新_0 回复 Dell #3

  好吧，我通过两个文件的代码对比，又觉得和组件swiper里面的属性loop: true有关系，icons文件里面是没有配这个的，当我在swiper文件里把这个配置注释掉之后，再把那个length长度判断也去掉，轮播正确显示第一页，但是，滑到第三页的时候，就不能继续滑到第一页了；相反，当icons文件加上loop: true时，直接显示第二页的图标组，目前就了解这么多吧