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

swiper 滑塊視圖容器

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

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

屬性說(shuō)明

indicator-dots

Boolean

false

否

是否顯示面板指示點(diǎn)

indicator-color

Color

rgba(0, 0, 0, .3)

否

指示點(diǎn)顏色

indicator-active-color

Color

#333

否

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

autoplay

Boolean

false

否

是否自動(dòng)切換

current

Number

0

否

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

current-item-id

String

否

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

1.11
低版本請(qǐng)做兼容性處理

interval

Number

5000

否

自動(dòng)切換時(shí)間間隔（單位：ms）

duration

Number

500

否

滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)（單位：ms）

circular

Boolean

false

否

是否采用銜接滑動(dòng)

vertical

Boolean

false

否

滑動(dòng)方向是否為縱向

previous-margin

String

“0px”

否

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

1.11
低版本請(qǐng)做兼容性處理

next-margin

String

“0px”

否

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

1.11
低版本請(qǐng)做兼容性處理

display-multiple-items

Number

1

否

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

1.11
低版本請(qǐng)做兼容性處理

bindchange

EventHandle

否

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

bindanimationfinish

EventHandle

否

動(dòng)畫(huà)結(jié)束時(shí)會(huì)觸發(fā) animationfinish 事件，event.detail 同上

1.11
低版本請(qǐng)做兼容性處理

change 事件 source 返回值

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

autoplay

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

touch

用戶(hù)滑動(dòng)導(dǎo)致的 swiper 切換

“”

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

示例

跳轉(zhuǎn)編輯工具

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

在 WEB IDE 中打開(kāi)

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度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}}
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 指示點(diǎn)
  
  
  
 
  
  
  
 class="init-switch"
  
  
  
 checked="{{switchIndicateStatus}}"
  
  
  
 bind:change="switchIndicate">
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 自動(dòng)切換
  
  
  
 
  
  
  
 checked="{{switchAutoPlayStatus}}"
  
  
  
 bind:change="switchAutoPlay"
  
  
  
 class="init-switch">
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 縱向滑動(dòng)
  
  
  
 
  
  
  
 checked="{{switchVerticalStatus}}"
  
  
  
 bind:change="switchVertical"
  
  
  
 class="init-switch">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 滑塊切換時(shí)長(zhǎng)
  
  
  
 {{switchDuration}}ms
  
  
  
 
  
  
  
 
  
  
  
 class="slider"
  
  
  
 min="300"
  
  
  
 max="1500"
  
  
  
 value="{{switchDuration}}"
  
  
  
 bind:change="changeSwitchDuration">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 自動(dòng)切換時(shí)間間隔
  
  
  
 {{autoPlayInterval}}ms
  
  
  
 
  
  
  
 
  
  
  
 class="slider"
  
  
  
 min="1000"
  
  
  
 max="5000"
  
  
  
 value="{{autoPlayInterval}}"
  
  
  
 bind:change="changeAutoPlayInterval">
  
  
  
 
  
  
  
 
  
  
  
 
 

設(shè)計(jì)指南

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

代碼示例 2：自定義底部切換圓點(diǎn)

• SWAN
• JS
• CSS

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

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

• SWAN
• JS
• CSS

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

Bug & Tip

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

常見(jiàn)問(wèn)題

Q：swiper 的面板指示點(diǎn)能自定義樣式嗎？

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