日常開發(fā)中，經常遇到要開發(fā)輪播組件的需求，身為一名前端頁面仔，本著拿來主義，當然是去npm上拔拔看有沒有合適的庫。驚奇的發(fā)現react版本的swiper組件庫出奇的少，絕大多數輪播組件庫都依賴于swiper組件。的確swiper組件豐富的api的確能夠滿足日常的開發(fā)，但是過于龐大的體積以及在最新版本的一些小bug讓我不得不放棄，所以擼了一個簡單的swiper組件庫去應付日常的開發(fā)。

先放上輪子的地址 react-tiga-swiper，求star。

Install

npm install --save react-tiga-swiper

Usage

import React, { Component } from 'react'

import Swiper,{SwipeRef} from 'react-tiga-swiper'
const swiperData = ["green", "red", "yellow", "black"];

function Example(props){

  const swiperRef = useRef<SwipeRef>(null);
  const [index, setIndex] = useState<any>();

  const swipeTo = () => {
    const swiperInstance = swiperRef.current;
    const currPage: string = index * 1 + '';
    swiperInstance?.swipeTo(parseInt(currPage, 10));
  };

  const prev = () => {
    const swiperInstance = swiperRef.current;
    swiperInstance?.prev();
  };

  const next = () => {
    const swiperInstance = swiperRef.current;
    swiperInstance?.next();
  };

  const onChange = (currPage: number, prevPage: number) => {
    console.log(currPage, prevPage);
  };
  
  return (
    <>
      <div style={{ marginBottom: 20 }}>
        <input
          type="number"
          value={index}
          onChange={(e) => setIndex(e.target.value)}
        />
        <span onClick={swipeTo}>手動跳轉頁面</span>
        <span onClick={prev}>上一頁</span>
        <span onClick={next}>下一頁</span>
      </div>
      <Swiper
        autoPlay={3000}
        style={{ height: "100px"}}
        selectedIndex={0}
        showIndicators={true}
        indicator={null}
        dots={null}
        ref={swiperRef}
        onChange={onChange}
      >
        {swiperData.map((item: string, key) => (
          <div key={key} style={{backgroundColor: item}}>{key + 1}</div>
        ))}
      </Swiper>
    </>
  )
}

API

實例方法