【微信小程式開發（2）---輪播圖展示】

app.json中已經配置

{
"pages":[
 "pages/demo10/demo10"
]
}
           

demo10.wxml

(通過swiper标簽來進行輪播圖的設定)

<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
<swiper-item> <image mode="widthFix" src="https://img.alicdn.com/imgextra/i3/126/O1CN01fOi05n1CnkYRnKbSS_!!126-0-luban.jpg" /></swiper-item>

<swiper-item> <image  mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /></swiper-item>
      
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB15tIjGVXXXXcoapXXSutbFXXX.jpg" /></swiper-item>
</swiper>
           

學習筆記：

< 輪播圖外層容器 swiper

每一個輪播項 swiper-item

swiper 标簽存在預設樣式

width 100%

height 150px image 存在預設寬度和高度 320 * 240

swiper 高度 内容無法實作 由内容撐開

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

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

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

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

height ：100 vw * 352 / 1125

autoplay:自動輪播

interval 修改輪播時間

circular 銜接輪播

indicator-dots 顯示 訓示器 （分頁器/索引器）

indicator-color 訓示器的未選中的顔色

indicator-active-color 訓示器的選中的顔色>

demo10.wxss

(輪播圖檔樣式顯示)

swiper{
  width: 100%;
  height:calc( height ：100vw * 352 / 1125);
}
image{
  width: 100%; 
}
           

手機模拟器顯示：

聲明：所用的模拟适配機型為iPhone5、iPhone6/7/8等均可。