Swiper：无限循环滚动时出现空白页/页面内容不刷新

问题描述

使用Swiper插件实现列表的无限循环滚动效果，记录遭遇的两个问题：①滚动到某页时界面显示空白；②用id唯一标识列表中需要动态改变的值，在改变某一id的div内容后，页面显示内容并未改变

问题分析

使用开发者工具查看页面元素，可以看到Swiper复制了真实列表的第一页并插入列表尾部，同时复制了真实列表的最后一页并插入列表头部（用于实现无限循环滚动效果）

由此可以得出产生问题的原因：
①Swiper容器中实际存在的页面比真实页面多2页，若容器的高度（纵向滚动时）/宽度（横向滚动时）只按真实页面数量计算（即：小于实际需要的高度/宽度），会因显示不下而出现空白；
②Swiper复制的首末页将其中具有唯一id的div也一起复制了，所以首末页中的id其实并不唯一，根据id改变的div可能是没有显示出来的那个（首页/末页）页面中的，导致获取div值是新值而页面显示内容不变

总结

通过分析问题原因，可以很轻松地解决这两个问题啦：
①设置Swiper无限循环滚动时，要将Swiper容器的高度/宽度设置为能够多容纳2个页面的值；
②最好使用class标识需要动态改变值的div（哪怕这个标识是“唯一”的），这样所有具有这一class的div内容都会改变

参考文档

[1] Swiper官网