微信小程序輪播圖【自適應】Swiper組件

十年河東，十年河西，莫欺少年窮

學無止境，精益求精 

 

我隨便在京東上找了三個圖片作為輪播圖，寫了如下代碼

<swiper>
  <swiper-item>
    <image src="https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/10024624781725/FocusFullshop/CkRqZnMvdDEvMjAyNzQyLzE0LzMxNDgvMTAyMTI5Mi82MTI3YWExMkU1ZWQ0YTFhNS8xY2U5ZWJkZmVmOWEwNDczLnBuZxIJMy10eV8wXzU0MAI47ot6QhMKD-mZiOS4gOWHoeaWsOiMthAAQhMKD-eJqee-juS7t-abtOS8mBABQhAKDOeri-WNs-aKoui0rRACQgoKBuenjeiNiRAHWJ3zy9HgowI/cr/s/q.jpg"/>
  </swiper-item>
  <swiper-item>
    <image src="https://img30.360buyimg.com/babel/s590x470_jfs/t1/209668/40/5894/175818/616eb008Ec2bc6aa0/ee0f886f2aef89d7.jpg.webp"/>
  </swiper-item>
  <swiper-item>
    <image src="https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/10030158609931/FocusFullshop/CkNqZnMvdDEvMTg1NzgwLzgvMTMwODcvNDkzNzg3LzYwZTY5N2YzRTc3ZWI3OTRhLzU1NTgyMzVkMDlmZWNjZWIucG5nEgk1LXR5XzBfNTYwAjjui3pCFwoTS08tU1RBUuiTneeJmeiAs-acuhAAQhYKEueyvuW9qeS4jeWuuemUmei_hxABQhAKDOeri-WNs-aKoui0rRACQgoKBui2heWAvBAHWIv8qaD1owI/cr/s/q.jpg"/>
  </swiper-item>
</swiper>

效果如下：

 圖中效果挺難看，究其原因，是因為微信小程序的圖片和swiper組件都是有默認寬高的

swiper 的默認寬高為

 

 

 image 的默認寬高為

 由於Swiper組件的高無法由圖片自動撐開，那么我們怎么才能做到Image 和 Swiper 自動適應呢？

輪播圖片的寬高是固定的，Swiper 的寬度是750rpx，因此我們可以通過如下公式自動計算Swiper的高度。

公式如下

圖片的寬度 / 圖片的高度 = Swiper的寬度 / Swiper 的高度

因此：

Swiper 的高度 = 圖片的寬度 / 圖片的高度 * Swiper的寬度

我在京東下載的圖片的寬高為：590*470

因此Swiper 的 高度為：590 /470 * 750=941.48rpx

現在，我在 .wxss 樣式文件中加上如下樣式：

/* pages/swiper/swiper.wxss */
swiper{
  width: 750rpx;
  height: calc(590 /470 * 750)rpx;
}
image{
 width: 100%;
}

上述CSS動態計算swiper 的高度，並指定的圖片的寬度為100%，那么我們還需要圖片的高度自動適應圖片的寬度，為Image加上Mode屬性

 <image mode="widthFix"

最后的效果圖為：

及

 這樣是不是就好看多了？？？

然后我們將Swipper 稍微加工下，

代碼為：

<!--pages/swiper/swiper.wxml-->
<swiper indicator-dots="{{true}}" indicator-color="red" indicator-active-color="yellow" autoplay="{{true}}" interval="3000"    >
  <swiper-item>
    <image mode="widthFix"
      src="https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/10024624781725/FocusFullshop/CkRqZnMvdDEvMjAyNzQyLzE0LzMxNDgvMTAyMTI5Mi82MTI3YWExMkU1ZWQ0YTFhNS8xY2U5ZWJkZmVmOWEwNDczLnBuZxIJMy10eV8wXzU0MAI47ot6QhMKD-mZiOS4gOWHoeaWsOiMthAAQhMKD-eJqee-juS7t-abtOS8mBABQhAKDOeri-WNs-aKoui0rRACQgoKBuenjeiNiRAHWJ3zy9HgowI/cr/s/q.jpg" />
  </swiper-item>
  <swiper-item>
    <image mode="widthFix"
      src="https://img30.360buyimg.com/babel/s590x470_jfs/t1/209668/40/5894/175818/616eb008Ec2bc6aa0/ee0f886f2aef89d7.jpg.webp" />
  </swiper-item>
  <swiper-item>
    <image mode="widthFix"
      src="https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/10030158609931/FocusFullshop/CkNqZnMvdDEvMTg1NzgwLzgvMTMwODcvNDkzNzg3LzYwZTY5N2YzRTc3ZWI3OTRhLzU1NTgyMzVkMDlmZWNjZWIucG5nEgk1LXR5XzBfNTYwAjjui3pCFwoTS08tU1RBUuiTneeJmeiAs-acuhAAQhYKEueyvuW9qeS4jeWuuemUmei_hxABQhAKDOeri-WNs-aKoui0rRACQgoKBui2heWAvBAHWIv8qaD1owI/cr/s/q.jpg" />
  </swiper-item>
</swiper>

效果圖為：

隨性筆記。

@天才卧龍的博客