小程序轮播图的自适应

小程序轮播图的自适应

等比设置轮播图的高度即 屏幕宽度 / 屏幕高度 = 图片宽度 / 图片高度 获取当前屏幕的高度：

// 方法 一、
wx.getSystemInfoSync().windowWidth
// 方法二、
750rpx
// 方法三、
calc()  100vw

• wxml

<swiper indicator-dots autoplay circular>
    <swiper-item>
        <image 
        src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"
        mode="widthFix" ></image>
    </swiper-item>
    <swiper-item>
        <image 
        src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"
        mode="widthFix"></image>
    </swiper-item>
    <swiper-item>
        <image 
        src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"
        mode="widthFix"></image>
    </swiper-item>
</swiper>

• wxss

swiper {
  width: 100%;
  height: calc(100vw * 300 /400 );

}
image{
  width: 100%;
}