摘要：
要使用该方法，首先安装插件npmiswiper--save，将插件和css样式引入到文件中。1importSwiper from“swiper”2import“swiper/css/swiper.css”粘贴代码1<--如果需要导航按钮-->；divclassName=“下一个滑动按钮”>；--如果需要滚动条-->；
插件特色
swipe.js是一个比较有名的触摸滑动插件，它能够处理内容滑动，支持自定义选项，你可以让它自动滚动，控制滚动间隔，返回回调函数等。经常可见使用在移动前端开发中。
使用方法
先安装插件 npm i swiper --save
在文件中引入插件和css样式
1 import Swiper from "swiper" 2 import "swiper/css/swiper.css"
粘贴代码
1 <div className="swiper-container"> 2 <div className="swiper-wrapper"> 3 <div className="swiper-slide">Slide 1</div> 4 <div className="swiper-slide">Slide 2</div> 5 <div className="swiper-slide">Slide 3</div>6 </div> 7 <!-- 如果需要分页器 --> 8 <div className="swiper-pagination"></div>
9 10 <!-- 如果需要导航按钮 --> 11 <div className="swiper-button-prev"></div>
12 <div className="swiper-button-next"></div>13 14 <!-- 如果需要滚动条 --> 15 <div className="swiper-scrollbar"></div> 16 </div>
需要注意的是在jsx中要将class都替换成className
然后再componentDidmount中进行实例
1 componentDidmount(){ 2 new Swiper ('.swiper-container', { 3 direction: 'vertical', // 垂直切换选项 4 loop: true, // 循环模式选项 5 6 // 如果需要分页器 7 pagination: { 8 el: '.swiper-pagination', 9 }, 10 11 // 如果需要前进后退按钮 12 navigation: { 13 nextEl: '.swiper-button-next', 14 prevEl: '.swiper-button-prev', 15 }, 16 17 // 如果需要滚动条 18 scrollbar: { 19 el: '.swiper-scrollbar', 20 }, 21 }) 22 }
然后就可以使用了
swiper还有许多设置
1 startSlide Integer (default:0) - 开始滚动的位置 2 speed Integer (default:300) - 动画滚动的间隔（秒数） 3 auto Integer - 开始自动幻灯片（以毫秒为单位幻灯片之间的时间） 4 continuous Boolean (default:true) - 创建一个无限的循环（当滑动到所有动画结束时是否循环滑动） 5 disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动 6 stopPropagation Boolean (default:false) - 是否停止事件冒泡 7 callback Function - 幻灯片运行中的回调函数 8 transitionEnd Function - 动画运行结束的回调函数
