一款更轻便、好用的react轮播组件

日常开发中，经常遇到要开发轮播组件的需求，身为一名前端页面仔，本着拿来主义，当然是去npm上拔拔看有没有合适的库。惊奇的发现react版本的swiper组件库出奇的少，绝大多数轮播组件库都依赖于swiper组件。的确swiper组件丰富的api的确能够满足日常的开发，但是过于庞大的体积以及在最新版本的一些小bug让我不得不放弃，所以撸了一个简单的swiper组件库去应付日常的开发。

先放上轮子的地址 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

实例方法