@dsh-prose/swipe NPM

移动端轮播图组件

使用

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;	×