欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序中如何實現(xiàn)輪播圖效果

 更新時間：2024年03月16日 11:05:43   作者：-希冀-  
這篇文章主要介紹了微信小程序中實現(xiàn)輪播圖效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

一、swiper視圖容器組件

swiper是輪播圖的外層容器，所以使用輪播圖就必須使用到swiper標簽。

二、swiper相關(guān)屬性

存在默認樣式：
1 width 100%
2 height 150px

三、swiper-item輪播項

只能放置在swiper組件中。表示每一個輪播項。

四、代碼實現(xiàn)

<!-- index.wxml代碼如下 -->
<view>
  <swiper interval="1000" indicator-dots="true" autoplay="true" circular="true">
    <swiper-item>
      <image mode="widthFix" src="https://img-blog.csdnimg.cn/5589ae9720df44fda0967faaa288a553.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBALeW4jOWGgC0=,size_20,color_FFFFFF,t_70,g_se,x_16"></image>
    </swiper-item>
    <swiper-item class="cri"> 
      <image mode="widthFix" src="https://img-blog.csdnimg.cn/5580029c6bed471487fe93983088cbae.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBALeW4jOWGgC0=,size_20,color_FFFFFF,t_70,g_se,x_16"></image>
    </swiper-item>
      <swiper-item>
        <image mode="widthFix" src="https://img-blog.csdnimg.cn/1472745c740d42caa002fb5b24b0069a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBALeW4jOWGgC0=,size_20,color_FFFFFF,t_70,g_se,x_16"></image>
      </swiper-item>
  </swiper>
</view>

編譯效果：

五、注意事項

當(dāng)切換機型后，就可以方向，圖片的寬高與效果不一樣

1.分析和升級版本，解決換機型的寬高問題

①先找出 原圖片的寬度和高度 ，我這里的原圖寬高是491*327
②等比例 給swiper 定 寬度和高度
swiper 寬度 / swiper 高度 = 原圖的寬度 / 原圖的高度
由上面可以推出：
swiper 高度 = swiper 寬度 * 原圖的高度 / 原圖的寬度
即 swiper 高度 = calc(100vw * 327 / 491)
③需要知道的是：css中vm是視口單位，1vw=視口寬度的百分之一，而swiper 寬度的默認是100%，即相當(dāng)于100vm
所以只需要在相對應(yīng)的wcss中加入如下樣式即可

swiper {
  width: 100%;
  height: calc(100vw * 327 /  491);
}
image {
  width: 100%;
}

此時編譯再觀察效果，任何機型都能達到預(yù)期效果啦

到此這篇關(guān)于微信小程序中實現(xiàn)輪播圖效果的文章就介紹到這了,更多相關(guān)小程序輪播圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論