关于react.js:在react中使用swiperjsv6

因为自己最近在应用 react 写 mobile websites 的时候须要用到滑动翻页的成果，于是想到找一个 swiper 来应用, 而后看了几篇文章，大多都是在 componentDidMount 中应用 new 实例化的形式引入 Swiper, 本人应用的应用发现这些文章的内容只能实现手动滑动，于是就本人摸索了一下，而后终于找到了解决办法。不多说，间接上代码吧

import React from 'react';
import PropTypes from 'prop-types';
import SwiperCore, {Pagination, Scrollbar, A11y, EffectCoverflow, EffectCube, Autoplay} from 'swiper';
import {Swiper, SwiperSlide} from 'swiper/react';
// import 'swiper/swiper-bundle.css';
import 'swiper/swiper.scss';
// import 'swiper/components/navigation/navigation.scss'; // 高低页箭头款式
import 'swiper/components/pagination/pagination.scss';
// import 'swiper/components/scrollbar/scrollbar.scss'; // 滚动 条款式
import '../../style/_swiper-rewrite.scss'; // 重写的 swiper 款式
 
import styles from './index.module.scss';
 
SwiperCore.use([Pagination, Autoplay, EffectCoverflow, EffectCube])
 
export default class MySwiper extends React.Component {
 
  static propTypes = {picPageArr: PropTypes.array}
 
  slideConfig = {
    tag: 'section',
    wrapperTag: 'ul',
    spaceBetween: 50, // 两个 slide 的间距
    slidesPerView: 1,
    loop: true,
    speed: 800,
    effect: 'coverflow',
    autoplay: {delay: 6000},
    pagination: {clickable: true},
    // scrollbar:{draggable: true},
    onSwiper: (swiper) => console.log(swiper),
    onSlideChange: () => console.log('slide change')
  }
 
  renderSlide = () => {const { picPageArr} = this.props
    return (picPageArr.map((item, index) => {
        return (<SwiperSlide tag='li' key={`slide${index + 1}`}>
            {item.map((innerItem, idx) => {
              return (<div key={idx}>
                  <img src={innerItem.card} className={styles.mobilePic} />
                </div>
              );
            })}
          </SwiperSlide>
        )})
    )
  }
 
  render() {
    return (
      <Swiper
        {...this.slideConfig}
      >
        {this.renderSlide()}
      </Swiper>
    )
  }
}

v6 版本是间接就能引入 Swiper 组件（之前的版本没去理解 ^_^），要害的代码其实就一行，心愿能帮忙到后来者。

SwiperCore.use([Pagination, Autoplay, EffectCoverflow, EffectCube])