背景是这样的,项目中使用Taro为多端开发框架,并使用Swiper组件,前期很好没有展现出问题,后边因为服务升级要对服务中的静态资源做处理。服务端同步资源时未能及时同步所有图片 这导致轮播图中的静态资源显示不出来,于是发生了…… 话不多说,直接上图 !
Swiper陷入了死循环,经过半天的努力终于把 Swiper的坑填平 !!(sit环境发生死循环真的很恐怖)
解决方案:
1、经过排查发现图片一直死循环的原因是,SwiperItem组件一直被更新重复动画不停的在进行类型以及动画的更换
如图:对浏览器造成了一万点伤害
2、经过排查发现前端在接口中拿到数据的时候 要对接口返回的数据做 判空处理
重点:判空处理一定要提前,要在整个Swiper的外面进行判断 如果为空则不进行轮播图的渲染
(我当时其实是做了对数据的判空处理的 ,不过是在对SwiperItem进行渲染的时候处理的,由此掉入了一个很大的坑)
总结:在使用Taro UI 里的Swiper组件的时候要着重关注数据的取值问题。数据为空时也会渲染SwiperItem,此时的dom节点是没有key的 后边数据填充后又对有key的Swiper进行处理 导致页面发生无限次的重排,从而导致组件无限次更换 导致了死循环的问题!! 得 ,又填一个keng