swiper 滑块视图容器

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

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

    请使用百度APP扫码

    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.         autoPlayInterval: 2000
    25.     },
    28.         console.log('swiperChange:', e.detail);
    29.     },
    30.     switchIndicate() {
    31.         this.setData({
    32.             switchIndicateStatus: !this.getData('switchIndicateStatus')
    33.         });
    34.     },
    35.     switchAutoPlay() {
    36.         this.setData({
    37.             switchAutoPlayStatus: !this.getData('switchAutoPlayStatus')
    38.         });
    39.     },
    40.     changeSwitchDuration(e) {
    41.         this.setData({
    42.             switchDuration: e.detail.value
    43.         });
    44.     },
    45.     changeAutoPlayInterval(e) {
    46.         this.setData({
    47.             autoPlayInterval: e.detail.value
    48.         });
    49.     },
    50.     animationfinish() {
    51.         console.log('animationfinish');
    52.     }
    53. });
    • Tip：如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则会导致 setData 被重复调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起的。
    • Tip：其中只可放置 swiper-item 组件，否则会导致未定义的行为。
    1.     data: {
    2.         currentTab: 0,
    4.     swiperNav(e) {
    5.         console.log(e); 
    7.         if (this.data.currentTab === e.target.dataset.current) {
    8.             return false;
    9.         } else {
    10.             this.setData({ 
    11.                 currentTab: e.target.dataset.current, 
    12.             })
    13.         }
    14.     },
    15.     swiperChange: function (e) {
    16.         console.log(e);  
    17.         this.setData({
    18.             currentTab: e.detail.current, 
    19.         })
    20.     }
    21. })

    在开发者工具中预览效果

    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>