swiper 滑块视图容器

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

属性说明

属性名类型默认值必填说明最低版本
indicator-dotsBooleanfalse否是否显示面板指示点-
indicator-colorColorrgba(0, 0, 0, .3)否指示点颜色-
indicator-active-colorColor#333否当前选中的指示点颜色-
autoplayBooleanfalse否是否自动切换-
currentNumber0否当前所在页面的 index-
current-item-idString否当前所在滑块的 item-id，不能与 current 被同时指定1.11 低版本请做兼容性处理
intervalNumber5000否自动切换时间间隔，单位ms-
durationNumber500否滑动动画时长，单位ms-
circularBooleanfalse否是否采用衔接滑动-
verticalBooleanfalse否滑动方向是否为纵向-
previous-marginString"0px"否前边距，可用于露出前一项的一小部分，支持px和rpx1.11低版本请做兼容性处理
next-marginString"0px"否后边距，可用于露出后一项的一小部分，支持px和rpx1.11低版本请做兼容性处理
display-multiple-itemsNumber1否同时显示的滑块数量1.11低版本请做兼容性处理
bindchangeEventHandle否current 改变时会触发 change 事件，event.detail = {current: current, source: source}-
bindanimationfinishEventHandle否动画结束时会触发 animationfinish 事件，event.detail 同上1.11低版本请做兼容性处理

change 事件 source 返回值

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

值说明
autoplay自动播放导致的swiper切换
touch用户划动导致的swiper切换
""其他原因将返回空字符串

示例

在开发者工具中预览效果

扫码体验

swiper 滑块视图容器 - 图1请使用百度APP扫码

代码示例 ：滑块滑动

  1. <view class="wrap">
  2.     <view class="title"></view>
  3.     <view class="swiper-wrap">
  4.         <swiper 
  5.             indicator-color="rgba(0,0,0,0.30)"
  6.             indicator-active-color="#fff"
  7.             duration="{{switchDuration}}"
  8.             interval="{{autoPlayInterval}}"
  9.             autoplay="{{switchAutoPlayStatus}}"
  10.             indicator-dots="{{switchIndicateStatus}}" 
  11.             vertical="false"
  12.             circular="true"
  13.             current="0"
  14.             current-item-id="0"
  15.             previous-margin="0px"
  16.             next-margin="0px"
  17.             display-multiple-items="1"
  18.             bind:change="swiperChange"
  19.             bind:animationfinish="animationfinish"
  20.         >
  21.             <block s-for="item in items">
  22.                 <swiper-item class="{{item.className}}">
  23.                     <view class="item">{{item.value}}</view>
  24.                 </swiper-item>
  25.             </block>
  26.         </swiper>
  27.     </view>
  29.     <view class="switch-wrap">
  30.         <view>
  31.             <text>指示器</text>
  32.             <switch checked="{{switchIndicateStatus}}" bind:change="switchIndicate" class="switch"></switch>
  33.         </view>
  34.         <view>
  35.             <text>自动播放</text>
  36.             <switch checked="{{switchAutoPlayStatus}}" bind:change="switchAutoPlay" class="switch"></switch>
  37.         </view>
  38.     </view>
  40.     <view class="slider-wrap">
  41.         <view>
  42.             <view class="slider-title-time">
  43.                 <text class="slider-title">幻灯片切换时长</text>
  44.                 <text class="slider-time">{{switchDuration}}ms</text>
  45.             </view>
  46.             <slider min="300" max="1500" value="{{switchDuration}}"  bind:change="changeSwitchDuration"></slider>
  47.         </view>
  49.         <view>
  50.             <view class="slider-title-time">
  51.                 <text class="slider-title">自动播放间隔时长</text>
  52.                 <text class="slider-time">{{autoPlayInterval}}ms</text>
  53.             </view>
  54.             <slider min="1000" max="5000" value="{{autoPlayInterval}}" bind:change="changeAutoPlayInterval"></slider>
  55.         </view>
  56.     </view>
  57. </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.         imgUrls: [
  16.             'https://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
  17.             'https://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
  18.             'https://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
  19.             'https://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
  20.         ],
  21.         current: 0,
  22.         switchIndicateStatus: true,
  23.         switchAutoPlayStatus: false,
  24.         switchDuration: 500,
  25.         autoPlayInterval: 2000
  26.     },
  28.     swiperChange(e) {
  29.         console.log('swiperChange:', e.detail);
  30.     },
  31.     switchIndicate() {
  32.         this.setData({
  33.             switchIndicateStatus: !this.getData('switchIndicateStatus')
  34.         });
  35.     },
  36.     switchAutoPlay() {
  37.         this.setData({
  38.             switchAutoPlayStatus: !this.getData('switchAutoPlayStatus')
  39.         });
  40.     },
  41.     changeSwitchDuration(e) {
  42.         this.setData({
  43.             switchDuration: e.detail.value
  44.         });
  45.     },
  46.     changeAutoPlayInterval(e) {
  47.         this.setData({
  48.             autoPlayInterval: e.detail.value
  49.         });
  50.     },
  51.     animationfinish() {
  52.         console.log('animationfinish');
  53.     }
  54. });

Bug & Tip

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

参考示例

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

在开发者工具中预览效果

  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: 自定义底部切换圆点

在开发者工具中预览效果

  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>
Page({
    data: {
        slider: [{
            imageUrl: 'https://b.bdstatic.com/miniapp/image/hypnosis.jpeg'
        }, {
            imageUrl: 'https://b.bdstatic.com/miniapp/images/hypnosis.jpeg'
        }, {
            imageUrl: 'https://b.bdstatic.com/miniapp/image/airCaptain.jpeg'
        }],
        swiperCurrent: 0
    },
    swiperChange(e) {
        this.setData({
            swiperCurrent: e.detail.current
        })
    }
})

.swiper-wrap{
    position: relative;
}
.swiper-wrap .swiper{
    height: 300rpx;
}
.swiper-wrap .swiper .img{
    width: 100%;
    height: 100%;
}
.swiper-wrap .dots{
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    display: flex;
    justify-content: center;
}
.swiper-wrap .dots .dot{
    margin: 0 8rpx;
    width: 14rpx;
    height: 14rpx;
    background: #fff;
    border-radius: 8rpx;
    transition: all .6s;
}

.swiper-wrap .dots .dot.active{
    width: 24rpx;
    background: #38f;
}