小程序中image標簽、swiper組件怎么用

這篇文章主要為大家展示了“小程序中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

輪播圖外層容器swiper

2 swiper-item

每一個輪播項swiper-item

3 swiper標簽存在默認樣式

（1）width 100%

（2）height 150pximage存在默認寬度和高度320240

（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-color

indicator-color指示器的未選擇的顏色

10 indicator-active-color

indicator-active-color選中的時候的指示器的顏色

以上是“小程序中image標簽、swiper組件怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！