---
title: WKSwiper 轮播
group:
  title: 展示组件
  path: /show/
---

## 何时使用

滑块视图容器。

- WKSwiper 用于左右滑动或上下滑动切换展示区域，比如走马灯、banner 轮播图。

## 基本使用

```tsx
import React, { useState } from 'react';
import { WKSwiper, WKView, WKSwitch, WKSlider } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [vertical, setVertical] = useState(false);
  const [autoplay, setAutoplay] = useState(true);
  const [circular, setCircular] = useState(true);
  const [indicatorDots, setIndicatorDots] = useState(true);
  const [duration, setDuration] = useState(500);
  const [intervalTime, setIntervalTime] = useState(2000);

  return (
    <PageWrapper title="基本使用">
      <WKSwiper
        className="w-full"
        vertical={vertical}
        indicatorDots={indicatorDots}
        autoplay={autoplay}
        circular={circular}
        duration={duration}
        interval={intervalTime}
      >
        <WKView className="w-full bg-primary-1" style={{ height: '150px' }} />
        <WKView className="w-full bg-primary-2" style={{ height: '150px' }} />
        <WKView className="w-full bg-primary-3" style={{ height: '150px' }} />
      </WKSwiper>

      <WKView className="flex items-center p-3 w-full">
        <WKView className="w-1__3">纵向轮播</WKView>
        <WKSwitch checked={vertical} onChange={() => setVertical(pre => !pre)} />
      </WKView>

      <WKView className="flex items-center p-3 w-full">
        <WKView className="w-1__3">指示点</WKView>
        <WKSwitch checked={indicatorDots} onChange={() => setIndicatorDots(pre => !pre)} />
      </WKView>

      <WKView className="flex items-center p-3 w-full">
        <WKView className="w-1__3">是否衔接</WKView>
        <WKSwitch checked={circular} onChange={() => setCircular(pre => !pre)} />
      </WKView>

      <WKView className="flex items-center p-3 w-full">
        <WKView className="w-1__3">自动播放</WKView>
        <WKSwitch checked={autoplay} onChange={() => setAutoplay(pre => !pre)} />
      </WKView>

      <WKView className="flex items-center p-3 w-full">
        <WKView className="w-1__2">幻灯片切换时长（ms）</WKView>
        <WKSlider
          value={duration}
          min={0}
          max={500}
          step={10}
          showValue
          onChange={val => setDuration(val.detail.value)}
        />
      </WKView>

      <WKView className="flex items-center p-3 w-full">
        <WKView className="w-1__2">自动播放时长（ms）</WKView>
        <WKSlider
          value={intervalTime}
          min={0}
          max={2000}
          step={100}
          showValue
          onChange={val => setIntervalTime(val.detail.value)}
        />
      </WKView>
    </PageWrapper>
  );
};
```

## 监听 Change 事件

```tsx
/**
 * title: 监听Change事件
 */
import React from 'react';
import { WKSwiper, WKView } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  /**
   * 触发change事件
   */
  const handleChange = () => {
    console.log('change');
  };

  return (
    <PageWrapper title="监听Change事件">
      <WKSwiper indicatorDots autoplay className="w-full" onChange={handleChange}>
        <WKView className="w-full bg-primary-1" style={{ height: '150px' }} />
        <WKView className="w-full bg-primary-2" style={{ height: '150px' }} />
        <WKView className="w-full bg-primary-3" style={{ height: '150px' }} />
      </WKSwiper>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKSwiper/index.d.ts'></API>
