• swiper 滑块视图容器
  • 属性说明
    • change 事件 source 返回值
  • 示例
    • 代码示例 1：
    • 代码示例 2：自定义底部切换圆点
    • 代码示例 3：模拟 tabs 组件功能
  • Bug & Tip
  • 常见问题
    • Q：swiper 的面板指示点能自定义样式吗？

swiper 滑块视图容器

解释：滑块视图容器。内部只允许使用 swiper-item 组件描述滑块内容，否则会导致未定义的行为。

创新互联公司从2013年开始，先为上蔡等服务建站，上蔡等地企业，进行企业商务咨询服务。为上蔡企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

属性说明

indicator-dots

Boolean

false

否

是否显示面板指示点

indicator-color

Color

rgba(0, 0, 0, .3)

否

指示点颜色

indicator-active-color

Color

#333

否

当前选中的指示点颜色

autoplay

Boolean

false

否

是否自动切换

current

Number

0

否

当前所在页面的 index

current-item-id

String

否

当前所在滑块的 item-id ，不能与 current 被同时指定

1.11
低版本请做兼容性处理

interval

Number

5000

否

自动切换时间间隔（单位：ms）

duration

Number

500

否

滑动动画时长（单位：ms）

circular

Boolean

false

否

是否采用衔接滑动

vertical

Boolean

false

否

滑动方向是否为纵向

previous-margin

String

“0px”

否

前边距，可用于露出前一项的一小部分，支持 px 和 rpx

1.11
低版本请做兼容性处理

next-margin

String

“0px”

否

后边距，可用于露出后一项的一小部分，支持 px 和 rpx

1.11
低版本请做兼容性处理

display-multiple-items

Number

1

否

同时显示的滑块数量

1.11
低版本请做兼容性处理

bindchange

EventHandle

否

current 改变时会触发 change 事件，event.detail = {current: current, source: source}

bindanimationfinish

EventHandle

否

动画结束时会触发 animationfinish 事件，event.detail 同上

1.11
低版本请做兼容性处理

change 事件 source 返回值

change 事件中的 source 字段，表示触发 change 事件的原因，可能值如下：

autoplay

自动播放导致的 swiper 切换

touch

用户滑动导致的 swiper 切换

“”

其他原因将返回空字符串

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：

• SWAN
• JS
• CSS

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 class="swiper"
  
  
  
 indicator-dots="{{switchIndicateStatus}}"
  
  
  
 indicator-color="rgba(0,0,0,0.30)"
  
  
  
 indicator-active-color="#fff"
  
  
  
 autoplay="{{switchAutoPlayStatus}}"
  
  
  
 current="0"
  
  
  
 current-item-id="0"
  
  
  
 interval="{{autoPlayInterval}}"
  
  
  
 duration="{{switchDuration}}"
  
  
  
 circular="true"
  
  
  
 vertical="{{switchVerticalStatus}}"
  
  
  
 previous-margin="0px"
  
  
  
 next-margin="0px"
  
  
  
 display-multiple-items="1"
  
  
  
 bind:change="swiperChange"
  
  
  
 bind:animationfinish="animationfinish">
  
  
  
 
  
  
  
 s-for="item in swiperList"
  
  
  
 item-id="{{itemId}}"
  
  
  
 class="{{item.className}}">
  
  
  
 {{item.value}}
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 指示点
  
  
  
 
  
  
  
 class="init-switch"
  
  
  
 checked="{{switchIndicateStatus}}"
  
  
  
 bind:change="switchIndicate">
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 自动切换
  
  
  
 
  
  
  
 checked="{{switchAutoPlayStatus}}"
  
  
  
 bind:change="switchAutoPlay"
  
  
  
 class="init-switch">
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 纵向滑动
  
  
  
 
  
  
  
 checked="{{switchVerticalStatus}}"
  
  
  
 bind:change="switchVertical"
  
  
  
 class="init-switch">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 滑块切换时长
  
  
  
 {{switchDuration}}ms
  
  
  
 
  
  
  
 
  
  
  
 class="slider"
  
  
  
 min="300"
  
  
  
 max="1500"
  
  
  
 value="{{switchDuration}}"
  
  
  
 bind:change="changeSwitchDuration">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 自动切换时间间隔
  
  
  
 {{autoPlayInterval}}ms
  
  
  
 
  
  
  
 
  
  
  
 class="slider"
  
  
  
 min="1000"
  
  
  
 max="5000"
  
  
  
 value="{{autoPlayInterval}}"
  
  
  
 bind:change="changeAutoPlayInterval">
  
  
  
 
  
  
  
 
  
  
  
 
 

设计指南

建议滑块视图数量控制在 2-5 个。
建议滑块切换时长不低于 500ms ，自动切换时间间隔不高于 5000ms 。

代码示例 2：自定义底部切换圆点

• SWAN
• JS
• CSS

 
 
 
  
  
  
  
  
  
 
  
  
  
 自定义底部切换圆点
  
  
  
 
  
  
  
 
  
  
  
 class="swiper-custom"
  
  
  
 autoplay="auto"
  
  
  
 interval="3000"
  
  
  
 duration="500"
  
  
  
 current="{{swiperCurrent}}"
  
  
  
 bindchange="swiperChangeCustom">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

代码示例 3：模拟 tabs 组件功能

• SWAN
• JS
• CSS

 
 
 
  
  
  
  
  
  
 
  
  
  
 模拟 tabs 组件功能
  
  
  
 
  
  
  
 
  
  
  
 全部
  
  
  
 服务通知
  
  
  
 系统通知
  
  
  
 评论
  
  
  
 其他
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 我是全部
  
  
  
 
  
  
  
 
  
  
  
 我是服务通知
  
  
  
 
  
  
  
 
  
  
  
 我是系统通知
  
  
  
 
  
  
  
 
  
  
  
 我是评论
  
  
  
 
  
  
  
 
  
  
  
 我是其他
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

Bug & Tip

• Tip：如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则会导致 setData 被重复调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起的。
• Tip：组件内部只可放置 swiper-item 组件，否则会导致未定义的行为。

常见问题

Q：swiper 的面板指示点能自定义样式吗？

A：参见属性说明，可以去掉 dot 显示之后，自己定义 dot 样式。具体代码可参见上方代码示例 2 。