关于swiper显示的图片是最后一张的问题

关于swiper显示的图片是最后一张的问题

# 具体遇到的问题
为什么先按照空数组进行初始化,后来获得数据之后再重新渲染页面,swiper会显示最后一张图片呢?

这两者有什么因果关系呢?
# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

在这里输入代码,可通过选择【代码语言】突出显示

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕久久 2020-12-02 16:28:38

同学你好,其实这属于swiper的一个bug,即如果swiper初始化时,没有数据,那么它会按照没有数据的模式来初始化,而在有数据之后,即使它会渲染内容,但是部分初始化过程是不会重新执行的,所以效果就不对了。而加上v-show后,由于swiper组件整体状态变了,swiper内部会监听该变化,监听到后,swiper内部会重新调用初始化过程,因此就能正常显示了。

祝学习愉快!

好帮手慕久久 2020-11-30 19:03:02

同学你好,swiper并没有显示最后一张,实际上显示的是第一张,具体如下:

轮播图数据如下:

http://img1.sycdn.imooc.com//climg/5fc4d0cd099797bf07520633.jpg

http://img1.sycdn.imooc.com//climg/5fc4d03809c2bfe609650329.jpg

http://img1.sycdn.imooc.com//climg/5fc4d05109102cbc14540678.jpg

效果:

http://img1.sycdn.imooc.com//climg/5fc4d0c9098e54f814870321.jpg

而html结构上,该图对应的位置如下:

http://img1.sycdn.imooc.com//climg/5fc4d0f409e0232014040535.jpg

之所以结构和展示顺序不一致,是因为swiper插件内部为了实现循环滚动,动态改变了html结构。

祝学习愉快!


    1. 没有添加 v-show="showSwiper" 的条件之前

      数据list本来是根据空数组进行渲染的,swiper组件在获取到Home组件传递过来的json数据之后重新进行渲染,默认显示第四张图片(也就是最后一张)(老师是这样说的呀)


    2020-12-02 16:13:51
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师