如何在微信小程序中使用swiper組件

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何在微信小程序中使用swiper組件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

微信小程序中的swiper組件

微信小程序中的swiper組件真的是簡(jiǎn)單方便

提供了頁(yè)面中圖片文字等滑動(dòng)的效果

<swiper>
  <swiper-item></swiper-item>
  <swiper-item></swiper-item>
  <swiper-item></swiper-item>
</swiper>

這里的就是一個(gè)滑塊視圖容器；而就是你希望滑動(dòng)的東西，可以是文字也可以是image

其中swiper有很多屬性。常用的有

• 屬性名                      默認(rèn)值                        作用

• indicator-dots         false                         是否顯示面板指示點(diǎn)

• indicator-color        rgba(0, 0, 0, .3)         指示點(diǎn)的顏色

• indicator-active-color        #000000        當(dāng)前選中的指示點(diǎn)顏色

• autoplay                  false                         是否自動(dòng)播放

• intervaly                  5000                         自動(dòng)切換時(shí)間間隔 

這里vertical=”true”在官方文檔中沒(méi)有提到，定義這個(gè)可以上下滑動(dòng)

還有一點(diǎn)需要注意vertical=”false”時(shí)，仍然是上下滑動(dòng)，原因就是微信小程序在解析時(shí)將”false”看成字符串，只要字符串不為空，就為真。所以我們需要這樣寫(xiě)：vertical=”{{false}}”

上述就是小編為大家分享的如何在微信小程序中使用swiper組件了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。