react使用swiper轮播
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react使用swiper轮播相关的知识，希望对你有一定的参考价值。
参考技术A首先引入，我这里使用是5.3.0
然后在组件头部引入
这里我使用的是class组件
初始化轮播组件
数据改变的时候，重新渲染
数据改变的时候可以会卡死，使用这个生命周期解决（list是传入的数据）。
原理：当数据发生改变，先销毁swiper，再重新初始化。
结束时销毁
render()中使用固定的class样式，在react中class换成className, swiper-container, swiper-no-swiping , swiper-wrapper , swiper-slide 这几个className属性为固定写法，不能修改，但是可以添加样式con，swiperFather为组件外层样式。con样式添加的原因是必须设置一个height，否则无法显示轮播效果
css样式
这个只是我个人的解决办法，应该还有其他办法
以上是关于react使用swiper轮播的主要内容，如果未能解决你的问题，请参考以下文章
React NatvieReact-native-swiper的安装和配置ES6