移动端轮播图组件

使用

import Swipe from "@dsh-prose/swipe";
import "@dsh-prose/swipe/style/style.scss";

function App(): JSX.Element {
  const swipe = useRef<Swipe | null>(null);
  useEffect(() => {
    const swipeEl = document.querySelector(".dsh-prose-swipe");
    if (swipeEl != null) {
      swipe.current = new Swipe(swipeEl as HTMLElement, {
        autoplay: true,
        // interval: 1000,
        // defaultCurrent: 2,
        // circular: false,
        // vertical: true,
        // previousMargin: "10px",
        // nextMargin: "10px",
        // displayMultipleItems: 2,
        // switchProportion: 5,
        // switchDistance: 100,
        // onChange({ current }) {
        //   console.log("current", current);
        // },
        // onAnimationFinish(current, { dx, dy }) {
        //   console.log("current", current, dx, dy);
        // },
      });
    }
    return () => {
      swipe.current?.destroy();
    };
  }, []);

  return (
    <>
      <div className="dsh-prose-swipe" style={{ borderBottom: "1px solid #ccc" }}>
        <div className="dsh-prose-swipe-wrapper">
          <div className="dsh-prose-swipe-slide" style={{ backgroundColor: "red" }}>
            <span>1</span>
          </div>
          <div className="dsh-prose-swipe-slide" style={{ backgroundColor: "green" }}>
            <span>2</span>
          </div>
          <div className="dsh-prose-swipe-slide" style={{ backgroundColor: "blue" }}>
            <span>3</span>
          </div>
        </div>
        <div className="dsh-prose-swipe-pagination"></div>
      </div>
    </>
  );
}

export default App;

参数

| 参数 | 说明 | 默认值 | 类型 | 必选 | | -------------------- | -------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------- | :--: | | autoplay | 无操作时自动播放 | false | boolean | × | | interval | 自动播放延迟时间 | 5000 | number | × | | defaultCurrent | 初始化滑块的 index | 0 | number | × | | circular | 是否采用衔接滑动 | true | boolean | × | | vertical | 滑动方向是否为纵向 | false | boolean | × | | previousMargin | 前边距，可用于露出前一项的一小部分，接受 css 单位 | "" | string | × | | nextMargin | 后边距，可用于露出后一项的一小部分，接受 css 单位 | "" | string | × | | displayMultipleItems | 同时显示的滑块数量，不包括前后边距导致露出来的块 | 1 | number | × | | switchProportion | 切换比例，默认为 5，也就是拖动出了 1/5 就会切换与 switchDistance 两者满足一个条件就行 | 5 | number | × | | switchDistance | 切换距离，默认为 80，也即是拖出了 80px 就会切换与 switchProportion 两者满足一个条件就行 | 80 | number | × | | onChange | 当前滑块索引变化的回调 | | (props: { current: number }) => void; | × | | onAnimationFinish | 滑块归位后的回调，dx 在横向滚动时有值，dy 在竖向滚动时有值 | | (current: number, props: { dx?: number; dy?: number }) => void; | × |

返回值

| 参数 | 说明 | 默认值 | 类型 | 必选 | | ------- | ------------------------------------------------------------- | ----------- | -------------------------- | :--: | | reset | 重置 Swipe | props: 参数 | (props?: Config) => void; | × | | destroy | 销毁轮播图，默认只销毁事件。深度销毁，包括 DOM 等所有的都销毁 | deep: false | (deep?: boolean) => void; | × | | slideTo | 跳转到指定位置 | | (current: number) => void; | × |