百度智能小程序 滑塊視圖容器

swiper 滑塊視圖容器

解釋：滑塊視圖容器。內(nèi)部只允許使用 <swiper-item> 組件描述滑塊內(nèi)容，否則會導致未定義的行為。

屬性說明

change 事件 source 返回值

change 事件中的 source 字段，表示觸發(fā) change 事件的原因，可能值如下：

示例 

在開發(fā)者工具中打開

代碼示例 ：滑塊滑動<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 items"
                item-id="{{itemId}}"
                class="{{item.className}}">
                <view class="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>

Page({
    data: {
        items: [
            {
                className: 'color-a',
                value: 'A'
            }, {
                className: 'color-b',
                value: 'B'
            }, {
                className: 'color-c',
                value: 'C'
            }
        ],
        current: 0,
        itemId: 0,
        switchIndicateStatus: true,
        switchAutoPlayStatus: false,
        switchVerticalStatus: false,
        switchDuration: 500,
        autoPlayInterval: 2000
    },
    swiperChange(e) {
        console.log('swiperChange:', e.detail);
        this.setData({
            itemId: e.detail.current
        });
    },
    switchIndicate() {
        this.setData({
            switchIndicateStatus: !this.getData('switchIndicateStatus')
        });
    },
    switchVertical() {
        this.setData({
            switchVerticalStatus: !this.getData('switchVerticalStatus')
        });
    },
    switchAutoPlay() {
        this.setData({
            switchAutoPlayStatus: !this.getData('switchAutoPlayStatus')
        });
    },
    changeSwitchDuration(e) {
        this.setData({
            switchDuration: e.detail.value
        });
    },
    changeAutoPlayInterval(e) {
        this.setData({
            autoPlayInterval: e.detail.value
        });
    },
    animationfinish(e) {
        console.log(e.type);
    }
});

.swiper {
    height: 2.18rem;
    border-radius: 8px 8px 0 0;
}

.item {
    width: 100%;
    height: 2.18rem;
    font-size: .18rem;
    color: #fff;
    text-align: center;
    line-height: 2.18rem;
}

.slider {
    margin: .3rem .23rem;
}

.switch-text-before {
    margin-top: .17rem;
}

.init-switch {
    vertical-align: middle;
    margin: .14rem 0 .14rem .17rem;
}

.color-a {
    background-color: #5B9FFF;
}

.color-b {
    background-color: #85B8FF;
}

.color-c {
    background-color: #ADCFFF;
}

.switch {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

設(shè)計指南

建議滑塊視圖數(shù)量控制在 2-5 個。

建議滑塊切換時長不低于 500ms，自動切換時間間隔不高于 5000ms。

Bug & Tip

• Tip：如果在 bindchange 的事件回調(diào)函數(shù)中使用 setData 改變 current 值，則會導致 setData 被重復調(diào)用，因而通常情況下請在改變 current 值前檢測 source 字段來判斷是否是由于用戶觸摸引起的。
• Tip：其中只可放置 swiper-item 組件，否則會導致未定義的行為。

參考示例

參考示例 1：用于實現(xiàn)頂部標簽切換 

在開發(fā)者工具中打開

<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>
    <!-- 頂部導航對應(yīng)的內(nèi)容 -->
    <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>

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, 
        })
    }
})

.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: 自定義底部切換圓點

在開發(fā)者工具中打開

<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>

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;
}

常見問題

Q：swiper 的面板指示點能自定義樣式嗎

A: 參見上面屬性說明，可以去 dot 顯示之后，自己定義 dot 樣式。

代碼示例： 參考示例 2