小程序 轮播图之自动适应宽高度

大家好，又见面了，我是你们的朋友全栈君。

以微信小程序为例:

wxml文件: 

<!-- 
  1.轮播图外层容器 swiper
  2.每一个轮播项 swiper-item
  3.swiper标签 存在默认样式
    1.width 100%
    2.height 150px image 存在默认宽度和高度 320* 240
    3.swiper 高度无法实现由内容撑开
  4.先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度
    原图的宽度和高度  750 x 300
    swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
    swiper高度 = swiper宽度 * 原图的高度/ 原图的宽度
    height : 100%*300/750
  5.autoplay 自动轮播
  6.interval 修改轮播时间
  7.circular 自动衔接轮播,这样就不会穿帮
  8.indicator-dots 显示 指示器 分页器 索引器
  9.indicator-color 指示器的未选择的颜色
  10.indicator-active-color 选中的指示器的颜色
 -->
 <swiper indicator-dots="true" indicator-active-color="#ff0094" indicator-color="#fff"  autoplay="true" interval="3000" circular="true">
   <swiper-item>
     <image mode="widthFix" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
   </swiper-item>
   <swiper-item>
     <image mode="widthFix" src="https://cdn.uviewui.com/uview/swiper/2.jpg"></image>
   </swiper-item>
   <swiper-item>
     <image mode="widthFix" src="https://cdn.uviewui.com/uview/swiper/3.jpg"></image>
   </swiper-item>
 </swiper>

wxss文件: 

/*给轮播图设定宽度为100%,高度通过计算得出*/
swiper{
  width: 100%;
 /* 300你的图片的高度, 750你的图片的宽度 ,100vw为显示屏幕的宽度*/
  height: calc(100vw * 300 / 750);
}

/*给图片设定宽度为100%*/
image{
  width: 100%;
}

未添加样式前:

添加样式且计算高度后: