swiper 滑块视图容器

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

属性说明

change 事件 source 返回值

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

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：

• SWAN
• JS
• CSS

<view class="wrap">
    <view class="card-area">
        <swiper 
            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">
            <swiper-item 
                s-for="item in swiperList"
                item-id="{{itemId}}"
                class="{{item.className}}">
                <view class="swiper-item">{{item.value}}</view>
            </swiper-item>
        </swiper>
        <view class="item-scroll border-bottom">
            <text class="switch-text-before">指示点</text>
            <switch 
                class="init-switch" 
                checked="{{switchIndicateStatus}}"
                bind:change="switchIndicate">
            </switch>
        </view>
        <view class="item-scroll border-bottom">
            <text class="switch-text-before">自动切换</text>
            <switch 
                checked="{{switchAutoPlayStatus}}" 
                bind:change="switchAutoPlay" 
                class="init-switch">
            </switch>
        </view>
        <view class="item-scroll">
            <text class="switch-text-before">纵向滑动</text>
            <switch 
                checked="{{switchVerticalStatus}}" 
                bind:change="switchVertical" 
                class="init-switch">
            </switch>
        </view>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>滑块切换时长</view>
            <view>{{switchDuration}}ms</view>
        </view>
        <slider 
            class="slider" 
            min="300" 
            max="1500" 
            value="{{switchDuration}}"
            bind:change="changeSwitchDuration">
        </slider>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>自动切换时间间隔</view>
            <view>{{autoPlayInterval}}ms</view>
        </view>
        <slider 
            class="slider" 
            min="1000" 
            max="5000" 
            value="{{autoPlayInterval}}"
            bind:change="changeAutoPlayInterval">
        </slider>
    </view>
</view>

设计指南

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

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

• SWAN
• JS
• CSS

<view class="wrap">
    <view class="card-area">
        <view class="top-description">自定义底部切换圆点</view>
        <view class="swiper-wrap">
            <swiper 
                class="swiper-custom"
                autoplay="auto"
                interval="3000"
                duration="500"
                current="{{swiperCurrent}}"
                bindchange="swiperChangeCustom">
                <swiper-item s-for="{{slider}}">
                    <image class="swiper-img" src="{{item.imageUrl}}"></image>
                </swiper-item>
            </swiper>
            <view class="dots">
                <view s-for="{{slider}}" class="dot {{index == swiperCurrent ? ' active' : ''}}"></view>
            </view>
        </view>
    </view>
</view>

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

• SWAN
• JS
• CSS

<view class="wrap">
    <view class="card-area">
        <view class="top-description">模拟 tabs 组件功能</view>
        <!-- 顶部导航 -->
        <view class="swiper-tab">
            <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swiperNav">全部</view>
            <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swiperNav">服务通知</view>
            <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swiperNav">系统通知</view>
            <view class="tab-item {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swiperNav">评论</view>
            <view class="tab-item {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swiperNav">其他</view>
        </view>
        <!-- 顶部导航对应的内容 -->
        <swiper class="swiper-content" current="{{currentTab}}" duration="200">
            <swiper-item>
                <view>我是全部</view>
            </swiper-item>
            <swiper-item>
                <view>我是服务通知</view>
            </swiper-item>
            <swiper-item>
                <view>我是系统通知</view>
            </swiper-item>
            <swiper-item>
                <view>我是评论</view>
            </swiper-item>
            <swiper-item>
                <view>我是其他</view>
            </swiper-item>
        </swiper>
    </view>
</view>

Bug & Tip

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

常见问题

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

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