微信小程序轮播图自适应案例

1 轮播图外层容器 swiper
2 每一个轮播图 swiper-item
3 swiper 标签 存在默认样式
  1 width 100%
   2 height 150px image 存在默认宽度和高度 320 * 240
   3 swiper 高度 无法实现由内容撑开
4 先找出 原图的宽度和高度 等比例 给swiper 计算出 swiper 的高度
   原图的宽度和高度 1125 x 352px
   swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
   swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度
   height : 100vw * 352 / 1125
5 常用属性
   autoplay  是否自动切换
   interval  自动切换时间间隔
   circular  是否循环轮播
   indicator-dots  是否显示面板指示点
   indicator-color  指示点颜色
   indicator-active-color  当前选中的指示点颜色

wxmx代码

<swiper autoplay interval = "1000" circular indicator-dots indicator-color ="#0094FF" indicator-active-color="#FF0094">
  <swiper-item>
     <image mode="widthFix" src="//aecpm.alicdn.com/tfscom/TB1y1rxBBr0gK0jSZFnXXbRRXXa.jpg_q50.jpg" > </image>
 </swiper-item>

  <swiper-item> 
    <image src="//aecpm.alicdn.com/simba/img/TB14ab1KpXXXXclXFXXSutbFXXX.jpg_q50.jpg" > </image> </swiper-item>

  <swiper-item>
     <image src="//gw.alicdn.com/imgextra/i2/19/O1CN01N0aLqe1C0k7TIUgs2_!!19-0-lubanu.jpg" > </image> 
</swiper-item>

</swiper>

wxss代码

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

image{
  width:100%;
  height: 100%;
}