title: swiper 滑块视图容器 header: develop nav: component sidebar: view_swiper

webUrl: https://qft12m.smartapps.cn/component/swiper/swiper

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

属性说明

属性名 类型 默认值 必填 说明 最低版本
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切换
“” 其他原因将返回空字符串

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/swiper/swiper - 图1 请使用百度APP扫码

代码示例 ：滑块滑动

:::codeTab

  1. <custom chineseName="滑块视图容器" engName="swiper"></custom>
  2. <view class="wrap">
  3.     <view class="card-area">
  4.         <swiper 
  5.             class="swiper"
  6.             indicator-dots="{{switchIndicateStatus}}" 
  7.             indicator-color="rgba(0,0,0,0.30)"
  8.             indicator-active-color="#fff"
  9.             autoplay="{{switchAutoPlayStatus}}"
  10.             current="0"
  11.             current-item-id="0"        
  12.             interval="{{autoPlayInterval}}"
  13.             duration="{{switchDuration}}"
  14.             circular="true"
  15.             vertical="{{switchVerticalStatus}}"
  16.             previous-margin="0px"
  17.             next-margin="0px"
  18.             display-multiple-items="1"
  19.             bind:change="swiperChange"
  20.             bind:animationfinish="animationfinish">
  21.             <swiper-item s-for="item in items"
  22.                         item-id="{{itemId}}"
  23.                         class="{{item.className}}">
  24.                 <view class="item">{{item.value}}</view>
  25.             </swiper-item>
  26.         </swiper>
  28.         <view class="item-scroll border-bottom">
  29.             <text class="switch-text-before">指示点</text>
  30.             <switch class="init-switch" 
  31.                     checked="{{switchIndicateStatus}}"
  32.                     bind:change="switchIndicate">
  33.             </switch>
  34.         </view>
  36.         <view class="item-scroll border-bottom">
  37.             <text class="switch-text-before">自动切换</text>
  38.             <switch checked="{{switchAutoPlayStatus}}" bind:change="switchAutoPlay" class="init-switch"></switch>
  39.         </view>
  41.         <view class="item-scroll">
  42.             <text class="switch-text-before">纵向滑动</text>
  43.             <switch checked="{{switchVerticalStatus}}" bind:change="switchVertical" class="init-switch"></switch>
  44.         </view>
  45.     </view>
  46.     <view class="card-area">
  47.         <view class="top-description border-bottom">
  48.             <view>滑块切换时长</view>
  49.             <view>{{switchDuration}}ms</view>
  50.         </view>
  51.         <slider class="slider" 
  52.                 min="300" 
  53.                 max="1500" 
  54.                 value="{{switchDuration}}"
  55.                 bind:change="changeSwitchDuration">
  56.         </slider>
  57.     </view>
  58.     <view class="card-area">
  59.         <view class="top-description border-bottom">
  60.             <view>自动切换时间间隔</view>
  61.             <view>{{autoPlayInterval}}ms</view>
  62.         </view>
  63.         <slider class="slider" 
  64.                 min="1000" 
  65.                 max="5000" 
  66.                 value="{{autoPlayInterval}}"
  67.                 bind:change="changeAutoPlayInterval">
  68.         </slider>
  69.     </view>
  70. </view>
  1. Page({
  2.     data: {
  3.         items: [
  4.             {
  5.                 className: 'color-a',
  6.                 value: 'A'
  7.             }, {
  8.                 className: 'color-b',
  9.                 value: 'B'
  10.             }, {
  11.                 className: 'color-c',
  12.                 value: 'C'
  13.             }
  14.         ],
  15.         current: 0,
  16.         itemId: 0,
  17.         switchIndicateStatus: true,
  18.         switchAutoPlayStatus: false,
  19.         switchVerticalStatus: false,
  20.         switchDuration: 500,
  21.         autoPlayInterval: 2000
  22.     },
  23.     swiperChange(e) {
  24.         console.log('swiperChange:', e.detail);
  25.         this.setData({
  26.             itemId: e.detail.current
  27.         });
  28.     },
  29.     switchIndicate() {
  30.         this.setData({
  31.             switchIndicateStatus: !this.getData('switchIndicateStatus')
  32.         });
  33.     },
  34.     switchVertical() {
  35.         this.setData({
  36.             switchVerticalStatus: !this.getData('switchVerticalStatus')
  37.         });
  38.     },
  39.     switchAutoPlay() {
  40.         this.setData({
  41.             switchAutoPlayStatus: !this.getData('switchAutoPlayStatus')
  42.         });
  43.     },
  44.     changeSwitchDuration(e) {
  45.         this.setData({
  46.             switchDuration: e.detail.value
  47.         });
  48.     },
  49.     changeAutoPlayInterval(e) {
  50.         this.setData({
  51.             autoPlayInterval: e.detail.value
  52.         });
  53.     },
  54.     animationfinish() {
  55.         console.log('animationfinish');
  56.     }
  57. });
  1. .swiper {
  2.     height: 2.18rem;
  3.     border-radius: 8px 8px 0 0;
  4. }
  6. .item {
  7.     width: 100%;
  8.     height: 2.18rem;
  9.     font-size: .18rem;
  10.     color: #fff;
  11.     text-align: center;
  12.     line-height: 2.18rem;
  13. }
  15. .slider {
  16.     margin: .3rem .23rem;
  17. }
  19. .switch-text-before {
  20.     margin-top: .17rem;
  21. }
  23. .init-switch {
  24.     vertical-align: middle;
  25.     margin: .14rem 0 .14rem .17rem;
  26. }
  28. .color-a {
  29.     background-color: #5B9FFF;
  30. }
  32. .color-b {
  33.     background-color: #85B8FF;
  34. }
  36. .color-c {
  37.     background-color: #ADCFFF;
  38. }
  40. .switch {
  41.     position: absolute;
  42.     top: 50%;
  43.     right: 0;
  44.     transform: translateY(-50%);
  45. }

:::

Bug & Tip

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

参考示例

参考示例 1：用于实现顶部标签切换

在开发者工具中预览效果

:::codeTab

  1. <view class="container"> 
  2.     <!-- 顶部导航 -->
  3.     <view class="swiper-tab">
  4.         <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swiperNav">Tab1</view> 
  5.         <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swiperNav">Tab2</view>
  6.         <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swiperNav">Tab3</view>
  7.     </view>
  8.     <!-- 顶部导航对应的内容 -->
  9.     <swiper class="swiper" current="{{currentTab}}" duration="200" bindchange="swiperChange">
  10.         <swiper-item>   
  11.             <!-- 页面可使用自定义组件编写 -->
  12.             <view>我是tab1</view>   
  13.         </swiper-item>
  14.         <swiper-item>
  15.             <view>我是tab2</view>
  16.         </swiper-item> 
  17.         <swiper-item>
  18.             <view>我是tab3</view>
  19.         </swiper-item>
  20.     </swiper>
  21. </view>
  1. Page({
  2.     data: {
  3.         currentTab: 0,
  4.     },
  5.     swiperNav(e) {
  6.         console.log(e); 
  8.         if (this.data.currentTab === e.target.dataset.current) {
  9.             return false;
  10.         } else {
  11.             this.setData({ 
  12.                 currentTab: e.target.dataset.current, 
  13.             })
  14.         }
  15.     },
  16.     swiperChange: function (e) {
  17.         console.log(e);  
  18.         this.setData({
  19.             currentTab: e.detail.current, 
  20.         })
  21.     }
  22. })
  1. .swiper-tab {
  2.     display: flex;
  3.     flex-direction: row;
  4.     line-height: 80rpx;
  5.     border-bottom: 1rpx solid #f5f5f5;
  6. }
  8. .tab-item {
  9.     width: 33.3%;
  10.     text-align: center; 
  11.     font-size: .16rem;
  12.     color: rgb(116, 113, 113);
  13. }
  15. .swiper {
  16.     height: 1100px; 
  17.     background: #dfdfdf;
  18. }
  20. .on {
  21.     color: #5B9FFF;
  22.     border-bottom: 1px solid #5B9FFF;
  23.     padding-bottom: 2px
  24. }

:::

参考示例 2: 自定义底部切换圆点

在开发者工具中预览效果

:::codeTab

  1. <view class="swiper-wrap">
  2.     <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
  3.         <swiper-item s-for="{{slider}}">
  4.             <image src="{{item.imageUrl}}" class="img"></image>
  5.         </swiper-item>
  6.     </swiper>
  8.     <view class="dots">
  9.         <view s-for="{{slider}}" class="dot {{index == swiperCurrent ? ' active' : ''}}"></view>
  10.     </view>
  11. </view>
  1. Page({
  2.     data: {
  3.         slider: [{
  4.             imageUrl: 'https://b.bdstatic.com/miniapp/image/hypnosis.jpeg'
  5.         }, {
  6.             imageUrl: 'https://b.bdstatic.com/miniapp/images/hypnosis.jpeg'
  7.         }, {
  8.             imageUrl: 'https://b.bdstatic.com/miniapp/image/airCaptain.jpeg'
  9.         }],
  10.         swiperCurrent: 0
  11.     },
  12.     swiperChange(e) {
  13.         this.setData({
  14.             swiperCurrent: e.detail.current
  15.         })
  16.     }
  17. })
  1. .swiper-wrap{
  2.     position: relative;
  3. }
  4. .swiper-wrap .swiper{
  5.     height: 300rpx;
  6. }
  7. .swiper-wrap .swiper .img{
  8.     width: 100%;
  9.     height: 100%;
  10. }
  11. .swiper-wrap .dots{
  12.     position: absolute;
  13.     right: 20rpx;
  14.     bottom: 20rpx;
  15.     display: flex;
  16.     justify-content: center;
  17. }
  18. .swiper-wrap .dots .dot{
  19.     margin: 0 8rpx;
  20.     width: 14rpx;
  21.     height: 14rpx;
  22.     background: #fff;
  23.     border-radius: 8rpx;
  24.     transition: all .6s;
  25. }
  27. .swiper-wrap .dots .dot.active{
  28.     width: 24rpx;
  29.     background: #38f;
  30. }

:::