Taro使用Swiper组件时会插入空的SwiperItem导致死循环

文章讲述了在使用Taro开发项目时遇到Swiper组件因服务端静态资源未同步导致的死循环问题。解决方案是提前在接口数据判空处理,避免空数据渲染SwiperItem,防止无key的DOM节点导致的无限重排和死循环。总结强调了数据取值和判空处理的重要性。
摘要由CSDN通过智能技术生成

        背景是这样的,项目中使用Taro为多端开发框架,并使用Swiper组件,前期很好没有展现出问题,后边因为服务升级要对服务中的静态资源做处理。服务端同步资源时未能及时同步所有图片 这导致轮播图中的静态资源显示不出来,于是发生了…… 话不多说,直接上图 !

   Swiper陷入了死循环,经过半天的努力终于把 Swiper的坑填平 !!(sit环境发生死循环真的很恐怖)

解决方案:

1、经过排查发现图片一直死循环的原因是,SwiperItem组件一直被更新重复动画不停的在进行类型以及动画的更换

如图:对浏览器造成了一万点伤害

2、经过排查发现前端在接口中拿到数据的时候 要对接口返回的数据做 判空处理 

    重点:判空处理一定要提前,要在整个Swiper的外面进行判断 如果为空则不进行轮播图的渲染

   (我当时其实是做了对数据的判空处理的 ,不过是在对SwiperItem进行渲染的时候处理的,由此掉入了一个很大的坑)

总结:在使用Taro UI 里的Swiper组件的时候要着重关注数据的取值问题。数据为空时也会渲染SwiperItem,此时的dom节点是没有key的 后边数据填充后又对有key的Swiper进行处理 导致页面发生无限次的重排,从而导致组件无限次更换 导致了死循环的问题!! 得 ,又填一个keng

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值