vue解决swiper动态改变数据后,分页混乱和点击左右箭头无效


问题描述:在动态改变swiper时会出现,分页数据错乱、没变化,点击左右箭头没反应。

在网上尝试了各种办法,给swiper设置属性observe:true,或者改变数据后调用mySwiper.update()函数进行更新,

发现没有用,最后发现将swiper部分用子组件来使用,通过强制更新子组件来更新swiper数据。

解决办法:
1、将轮播图部分,当成子组件使用。并给子组件绑定一个key值,为了能够让子实时组件更新。

 

 

2、将swiper初始化数据在子组件mounted时期调用

3、最后将改变后的数据赋值给子组件,同时给子组件赋值一个新的key值。这样动态改变swiper数据就不会出现分页错乱和点击箭头无效了。

写在最后:可能还有更简单的办法,如果有大佬懂的,可以留言。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM