swiper 滑块视图容器

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

属性说明

change 事件 source 返回值

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

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例 ：滑块滑动

  1. <view class="wrap">    <view class="title"></view>    <view class="swiper-wrap">        <swiper             indicator-color="rgba(0,0,0,0.30)"            indicator-active-color="#fff"            duration="{{switchDuration}}"            interval="{{autoPlayInterval}}"            autoplay="{{switchAutoPlayStatus}}"            indicator-dots="{{switchIndicateStatus}}"             vertical="false"            circular="true"            current="0"            current-item-id="0"            previous-margin="0px"            next-margin="0px"            display-multiple-items="1"            bind:change="swiperChange"            bind:animationfinish="animationfinish"        >            <block s-for="item in items">                <swiper-item class="{{item.className}}">                    <view class="item">{{item.value}}</view>                </swiper-item>            </block>        </swiper>    </view>    <view class="switch-wrap">        <view>            <text>指示器</text>            <switch checked="{{switchIndicateStatus}}" bind:change="switchIndicate" class="switch"></switch>        </view>        <view>            <text>自动播放</text>            <switch checked="{{switchAutoPlayStatus}}" bind:change="switchAutoPlay" class="switch"></switch>        </view>    </view>    <view class="slider-wrap">        <view>            <view class="slider-title-time">                <text class="slider-title">幻灯片切换时长</text>                <text class="slider-time">{{switchDuration}}ms</text>            </view>            <slider min="300" max="1500" value="{{switchDuration}}"  bind:change="changeSwitchDuration"></slider>        </view>        <view>            <view class="slider-title-time">                <text class="slider-title">自动播放间隔时长</text>                <text class="slider-time">{{autoPlayInterval}}ms</text>            </view>            <slider min="1000" max="5000" value="{{autoPlayInterval}}" bind:change="changeAutoPlayInterval"></slider>        </view>    </view></view>
  1. Page({    data: {        items: [            {                className: 'color-a',                value: 'A'            }, {                className: 'color-b',                value: 'B'            }, {                className: 'color-c',                value: 'C'            }        ],        imgUrls: [            'https://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',            'https://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',            'https://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',            'https://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'        ],        current: 0,        switchIndicateStatus: true,        switchAutoPlayStatus: false,        switchDuration: 500,        autoPlayInterval: 2000    },    swiperChange(e) {        console.log('swiperChange:', e.detail);    },    switchIndicate() {        this.setData({            switchIndicateStatus: !this.getData('switchIndicateStatus')        });    },    switchAutoPlay() {        this.setData({            switchAutoPlayStatus: !this.getData('switchAutoPlayStatus')        });    },    changeSwitchDuration(e) {        this.setData({            switchDuration: e.detail.value        });    },    changeAutoPlayInterval(e) {        this.setData({            autoPlayInterval: e.detail.value        });    },    animationfinish() {        console.log('animationfinish');    }});

Bug & Tip

  • -

    参考示例

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

    在开发者工具中预览效果
    1. <view class="container">     <!-- 顶部导航 -->    <view class="swiper-tab">        <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swiperNav">Tab1</view>         <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swiperNav">Tab2</view>        <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swiperNav">Tab3</view>    </view>    <!-- 顶部导航对应的内容 -->    <swiper class="swiper" current="{{currentTab}}" duration="200" bindchange="swiperChange">        <swiper-item>               <!-- 页面可使用自定义组件编写 -->            <view>我是tab1</view>           </swiper-item>        <swiper-item>            <view>我是tab2</view>        </swiper-item>         <swiper-item>            <view>我是tab3</view>        </swiper-item>    </swiper></view>
    1. Page({    data: {        currentTab: 0,    },    swiperNav(e) {        console.log(e);         if (this.data.currentTab === e.target.dataset.current) {            return false;        } else {            this.setData({                 currentTab: e.target.dataset.current,             })        }    },    swiperChange: function (e) {        console.log(e);          this.setData({            currentTab: e.detail.current,         })    }})
    1. .swiper-tab {    display: flex;    flex-direction: row;    line-height: 80rpx;    border-bottom: 1rpx solid #f5f5f5;}.tab-item {    width: 33.3%;    text-align: center;     font-size: .16rem;    color: rgb(116, 113, 113);}.swiper {    height: 1100px;     background: #dfdfdf;}.on {    color: #5B9FFF;    border-bottom: 1px solid #5B9FFF;    padding-bottom: 2px}

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

    在开发者工具中预览效果
    1. <view class="swiper-wrap">    <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">        <swiper-item s-for="{{slider}}">            <image src="{{item.imageUrl}}" class="img"></image>        </swiper-item>    </swiper>    <view class="dots">        <view s-for="{{slider}}" class="dot {{index == swiperCurrent ? ' active' : ''}}"></view>    </view></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. })
    ``` .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; } ```