React中swiper的配置(reactjs-swiper)
作者：Emperor-c
本文详述了在React项目中使用reactjs-swiper组件的步骤与技巧,包括安装、配置、解决swiperOptions无效问题及组件挂载,下面就来详细的介绍一下
总共分为六个步骤：
第一步：
//npm install reactjs-swiper;
// 先安装 reactjs-swiper; npm install reactjs-swiper;
第二步：
找到该模块的Reactswiper模块：
第二步：
修改swiper选项
相关代码：
// 先安装 reactjs-swiper;
var swiperOptions = showPagination ? {
pagination: '.swiper-pagination',
..._props.swiperOptions
} : {..._props.swiperOptions};第三步：
去除严格模式
直接将<React.StrictMode></React.StrictMode>标签去除即可
第四步：
引入ReactSwiper ， 配置state，也就是swiper的数据源，也可以通过props获取
import ReactSwiper from 'reactjs-swiper'
item 和swiperOptions的配置
this.state ={
items :[{
image: 'http://....jpg1',
title: '图1',
link: 'http://jd.com'
}, {
image: 'http://....jpg2',
title: '图2',
}, {
image: 'http://....jpg3',
title: '图3',
link: 'http://jd.com'
}, {
image: 'http://....jpg4',
title: '图4',
}],
swiperOptions:{
preloadImages: true,
autoplay: 4000,
autoplayDisableOnInteraction: false,
spaceBetween :0,
}
}这里面主要有两个一个是items 另一个是swiperOptions，第一个是图片的数据源，第二个是swiper的相关配置
最后一步，挂载组件
代码：
<ReactSwiper swiperOptions={this.state.swiperOptions} showPagination items={this.state.items}
className="swiper-example" />
写在最后：
到此这篇关于React中swiper的配置(reactjs-swiper)的文章就介绍到这了,更多相关React swiper配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！