微信小程序swiper高度自适应方法

swiper默认高度是150px,在不同设备的分辨率下不能自适应，

 

 

 

 

 

 

 

 

利用wx小程序的wxss 的单位尺寸 rpx自适应

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

以iPhone6为标准设置image的行内样式100%，mode 设置为widthFix，检查图片的高度，如图图片高度为157px，在wss设置swiper的高度为314rpx（iPhone6的设计稿是实际尺寸的两倍）

 

 

 wxmL代码如下：

<!--pages/swiper/swiper.wxml-->
<view>
    <swiper indicator-dots="{{true}}">
        <swiper-item wx:for="{{list}}" wx:key="index" class="swiper-item">
            <image src="{{item.image_url}}" mode="widthFix" style="width: 100%;"></image>
        </swiper-item>
    </swiper>
</view>

wxss代码如下：

/* pages/swiper/swiper.wxss */
swiper{
    height: 314rpx;
}

效果如下：