「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

前言

swiper作为一个广泛的移动端网页触摸内容滑动js插件，关于在react中的使用的例子都相对比较少，版本也比较旧，官方没有太多关于react的demo，这里主要实现一个比较常见的例子swiper7 在 react 中的双向控制实现导航与swiper联动

安装

使用npm安装

npm i swiper

基本使用

官方文档地址： Swiper React Components

// 引入Swiper组件
import { Swiper, SwiperSlide } from 'swiper/react';

// 引入Swiper样式
import 'swiper/css';
export default () => {
  return (
    <Swiper
      spaceBetween={50} 
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

swiper7相较于之前的版本，组件化分离得比较细致，除了两个基础的组件是默认必须引入的，其他Controller, Navigation, Pagination, Scrollbar, Virtual, Mousewheel, Autoplay都是按需引入加载，这样页面加载可以更快！

如何做双向控制

由于swiper官方没有react的详细demo，也没有中文文档，英文文档的例子也相对简单，这边摸索了一下，做了一个导航跟swiper的双向控制滑动组件

import { Swiper, SwiperSlide } from 'swiper/react';
//其他模块引入
import { Controller, Navigation, Pagination, Scrollbar, Mousewheel, Autoplay } from 'swiper'
// 引入Swiper样式
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

class SwiperConent extends Component {
  constructor(props) {
   	super(props)
    //全部数据
    this.state = {
      // 初始化数据
      tabList: [{ title: 'tab1' }, { title: 'tab2' }, { title: 'tab3' }, { title: 'tab4' }],
      currentIndex: 0,
    }
  }
   　
  changeSwiper(value) {
    console.log(value)
    this.setState({
      currentIndex: value,
    })
    //点击改变swiper
    this.swiper.slideTo(value)
  }
  onSwiper(swiper) {
    console.log(swiper)
  }
  slideChange(e) {
    console.log(e.activeIndex)
    this.setState({
      currentIndex: e.activeIndex,
    })
  }

  render() {
    const { tabList } = this.state
    return (
	   <ul className="apply-menu">
	      {tabList.map((item, index) => (
	         <li
	           key={index}
	           className={index === this.state.currentIndex ? 'menu-active' : ''}
	           onClick={() => {
	             this.changeSwiper(index)//绑定点击
	           }}
	         >
	           {item.title}
	         </li>
	       ))}
	     </ul>
	     <Swiper
                 // install Swiper modules
                 modules={[Controller, Navigation, Pagination, Scrollbar, Mousewheel, Autoplay]}
	     	 spaceBetween={0}
	         slidesPerView={1}
	         navigation
	         autoplay
	         pagination={{ clickable: true }}
	         onSwiper={(swiper) => {
	           //重点是将swiper挂载到this上
	           this.swiper = swiper 
	         }}
	         onSlideChange={(e) => {
	           this.slideChange(e)
	         }}
	    >
	      <SwiperSlide>Slide 1</SwiperSlide>
	      <SwiperSlide>Slide 2</SwiperSlide>
	      <SwiperSlide>Slide 3</SwiperSlide>
	      <SwiperSlide>Slide 4</SwiperSlide>
	    </Swiper>
     ）
  }
	
}

这里代码的重点是在onSwiper的时候将swiper挂载到this，这样就可以在其他地方使用this.swiper拿到swiper的相关属性跟方法，这样就可以方便地实现很多功能啦！

原创文章，转载请注明出处～谢谢🙏