---
name: "swiper-item"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "swiper-item - 滑块视图容器子项"
---

## swiper-item

> [VERSION] 基础库 >= 2.10.0

### 描述

滑块视图容器的子项，仅可放置在 swiper 组件内使用。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `item-id` | `string` | 否 | `""` | 该滑块的标识符 |

### 示例代码

#### 基础用法

*index.tyml*

```xml
<swiper class="swiper" autoplay="{{true}}" interval="{{3000}}">
  <swiper-item>
    <view class="swiper-content" style="background-color: #e6f7ff;">
      <text>第一页</text>
    </view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-content" style="background-color: #fff7e6;">
      <text>第二页</text>
    </view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-content" style="background-color: #f6ffed;">
      <text>第三页</text>
    </view>
  </swiper-item>
</swiper>
```

*index.tyss*

```css
.swiper {
  height: 300rpx;
}
.swiper-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}
```

*index.js*

```javascript
Page({
  data: {},
});
```

#### 配合 swiper 使用循环与指示点

*index.tyml*

```xml
<swiper
  class="swiper"
  indicator-dots="{{true}}"
  circular="{{true}}"
  bind:change="onChange"
>
  <swiper-item>
    <view class="swiper-content bg-blue">页面 A</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-content bg-green">页面 B</view>
  </swiper-item>
</swiper>
<text>当前索引: {{current}}</text>
```

*index.tyss*

```css
.swiper {
  height: 300rpx;
}
.swiper-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg-blue { background-color: #e6f7ff; }
.bg-green { background-color: #f6ffed; }
```

*index.js*

```javascript
Page({
  data: {
    current: 0,
  },
  onChange(e) {
    this.setData({ current: e.detail.current });
  },
});
```