小程式學習之淺析image標籤、swiper元件

這篇文章帶大家了解一下小程式中的image標籤圖片標籤和swiper輪播圖組件，希望對大家有幫助！

一、image標籤圖片標籤

#1 src

src指定要載入的圖片的路徑

（1）圖片存在預設的寬度和高度320 * 240原圖大小是200 * 100

2 mode

mode決定圖片內容如何和圖片標籤寬高做適配

（1）scaleToFill 預設值不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿image元素

（2）aspectFit保持寬高比確保圖片的長邊顯示出來頁面輪播圖常用

（3）aspectFill保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。少用

（4） widthFix以前web的圖片的 寬度指定了之後高度會自己按比例來調整常用5 bottom。 。類似先前的backgroud-position

【相關學習推薦：小程式開發教學】

3 lazy-load

小程式當中的圖片直接就支援懶加載lazy-load

lazy-load 會自己判斷當圖片出現在視口Ⅰ上下三屏的高度之內的時候自己開始加載圖片

二、swiper輪播圖元件

swiper就是一個包裹輪播圖的容器，裡面的子元素必須是swiper-item組件。 swiper可以自動的輪播子元素，並且天生就帶有指示點，還可以使用手指左右滑動。

1 swiper

##2 swiper-item

#3 swiper標籤存在預設樣式

240

4 先找出來原圖的寬度和高度等比例給swiper定寬度和高度

#5 autoplay

6 interval

7 circular

#8 indicator-dots

##9 indicator-colorindicator-color指示器的未選取的顏色

#10 indicator-active-colorindicator-active-color選取的時候的指示器的顏色

更多程式相關知識，請造訪：

！ ！

以上是小程式學習之淺析image標籤、swiper元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！