微信小程序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;
}

效果如下：