微信小程序中的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í)間間隔 

更多的屬性可以去查看微信小程序官方教程

https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

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

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

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！