• swiper 滑塊視圖容器
  • 屬性說明
    • change 事件 source 返回值
  • 示例
    • 代碼示例 1：
    • 代碼示例 2：自定義底部切換圓點
    • 代碼示例 3：模擬 tabs 組件功能
  • Bug & Tip
  • 常見問題
    • Q：swiper 的面板指示點能自定義樣式嗎？

swiper 滑塊視圖容器

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

創(chuàng)新互聯(lián)公司從2013年開始，先為上蔡等服務(wù)建站，上蔡等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為上蔡企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

屬性說明

indicator-dots

Boolean

false

否

是否顯示面板指示點

indicator-color

Color

rgba(0, 0, 0, .3)

否

指示點顏色

indicator-active-color

Color

#333

否

當(dāng)前選中的指示點顏色

autoplay

Boolean

false

否

是否自動切換

current

Number

0

否

當(dāng)前所在頁面的 index

current-item-id

String

否

當(dāng)前所在滑塊的 item-id ，不能與 current 被同時指定

1.11
低版本請做兼容性處理

interval

Number

5000

否

自動切換時間間隔（單位：ms）

duration

Number

500

否

滑動動畫時長（單位：ms）

circular

Boolean

false

否

是否采用銜接滑動

vertical

Boolean

false

否

滑動方向是否為縱向

previous-margin

String

“0px”

否

前邊距，可用于露出前一項的一小部分，支持 px 和 rpx

1.11
低版本請做兼容性處理

next-margin

String

“0px”

否

后邊距，可用于露出后一項的一小部分，支持 px 和 rpx

1.11
低版本請做兼容性處理

display-multiple-items

Number

1

否

同時顯示的滑塊數(shù)量

1.11
低版本請做兼容性處理

bindchange

EventHandle

否

current 改變時會觸發(fā) change 事件，event.detail = {current: current, source: source}

bindanimationfinish

EventHandle

否

動畫結(jié)束時會觸發(fā) animationfinish 事件，event.detail 同上

1.11
低版本請做兼容性處理

change 事件 source 返回值

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

autoplay

自動播放導(dǎo)致的 swiper 切換

touch

用戶滑動導(dǎo)致的 swiper 切換

“”

其他原因?qū)⒎祷乜兆址?/p>

示例

跳轉(zhuǎn)編輯工具

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

在 WEB IDE 中打開

掃碼體驗

代碼示例

請使用百度APP掃碼

代碼示例 1：

• SWAN
• JS
• CSS

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 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">
  
  
  
 
  
  
  
 s-for="item in swiperList"
  
  
  
 item-id="{{itemId}}"
  
  
  
 class="{{item.className}}">
  
  
  
 {{item.value}}
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 指示點
  
  
  
 
  
  
  
 class="init-switch"
  
  
  
 checked="{{switchIndicateStatus}}"
  
  
  
 bind:change="switchIndicate">
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 自動切換
  
  
  
 
  
  
  
 checked="{{switchAutoPlayStatus}}"
  
  
  
 bind:change="switchAutoPlay"
  
  
  
 class="init-switch">
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 縱向滑動
  
  
  
 
  
  
  
 checked="{{switchVerticalStatus}}"
  
  
  
 bind:change="switchVertical"
  
  
  
 class="init-switch">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 滑塊切換時長
  
  
  
 {{switchDuration}}ms
  
  
  
 
  
  
  
 
  
  
  
 class="slider"
  
  
  
 min="300"
  
  
  
 max="1500"
  
  
  
 value="{{switchDuration}}"
  
  
  
 bind:change="changeSwitchDuration">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 自動切換時間間隔
  
  
  
 {{autoPlayInterval}}ms
  
  
  
 
  
  
  
 
  
  
  
 class="slider"
  
  
  
 min="1000"
  
  
  
 max="5000"
  
  
  
 value="{{autoPlayInterval}}"
  
  
  
 bind:change="changeAutoPlayInterval">
  
  
  
 
  
  
  
 
  
  
  
 
 

設(shè)計指南

建議滑塊視圖數(shù)量控制在 2-5 個。
建議滑塊切換時長不低于 500ms ，自動切換時間間隔不高于 5000ms 。

代碼示例 2：自定義底部切換圓點

• SWAN
• JS
• CSS

 
 
 
  
  
  
  
  
  
 
  
  
  
 自定義底部切換圓點
  
  
  
 
  
  
  
 
  
  
  
 class="swiper-custom"
  
  
  
 autoplay="auto"
  
  
  
 interval="3000"
  
  
  
 duration="500"
  
  
  
 current="{{swiperCurrent}}"
  
  
  
 bindchange="swiperChangeCustom">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

代碼示例 3：模擬 tabs 組件功能

• SWAN
• JS
• CSS

 
 
 
  
  
  
  
  
  
 
  
  
  
 模擬 tabs 組件功能
  
  
  
 
  
  
  
 
  
  
  
 全部
  
  
  
 服務(wù)通知
  
  
  
 系統(tǒng)通知
  
  
  
 評論
  
  
  
 其他
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 我是全部
  
  
  
 
  
  
  
 
  
  
  
 我是服務(wù)通知
  
  
  
 
  
  
  
 
  
  
  
 我是系統(tǒng)通知
  
  
  
 
  
  
  
 
  
  
  
 我是評論
  
  
  
 
  
  
  
 
  
  
  
 我是其他
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

Bug & Tip

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

常見問題

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

A：參見屬性說明，可以去掉 dot 顯示之后，自己定義 dot 樣式。具體代碼可參見上方代碼示例 2 。