小程式學習之淺析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

每一個輪播項目swiper-item

#3 swiper標籤存在預設樣式

（ 1）width 100%

（2）height 150pximage存在預設寬度和高度320

240

（3）*swiper高度無法實現由內容撐開

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

原圖的寬度和高度1125 * 352 px

swiper寬度/ swiper高度=原圖的寬度/原圖的高度

swiper高度=swiper寬度*原圖的高度/原圖的寬度

height: 10ovw * 352 /1125

#5 autoplay

autoplay自動輪播

6 interval

interval修改輪播時間

7 circular

circular銜接輪播

#8 indicator-dots

indicator-dots顯示指示器分頁器索引器

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

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

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

程式設計入門

！ ！

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