微信小程式之swiper輪播圖中的圖片自適應高度

hover_lew發表於2019-02-16
微信小程式

小程式中的輪播圖很簡單，官方都有例子的，但是唯一的缺陷就是swiper是固定死的150px高度，這樣如果傳入的圖片大於這個高度就會被隱藏。辣麼，怎樣讓圖片自適應不同解析度捏。

我的思路是：獲取螢幕寬度，獲取圖片的寬高，然後等比設定當前螢幕寬度下swiper的高度。

1.結構

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style=`height:{{Height}}`>
      <block wx:for="{{imgUrls}}">
        <swiper-item>
            <image src="{{item}}" class="slide-image" mode="widthFix" bindload=`imgHeight`/>   //bindload是繫結圖片載入的事件,記得給image加上mode=“widthFix”這個屬性哦，還有就是設定這個image 100%寬度喲
        </swiper-item>
      </block>
</swiper>

swiper的各個屬性在官方文件中都有，這裡就不說明了。最主要的是： style=`height:{{Height}}` //動態設定swiper的高度

2.在page裡面：

data: {
    imgUrls: [                   
        `../img/goodsDetail/goods.png`,
        `../img/goodsDetail/goods.png`,
        `../img/goodsDetail/goods.png`
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1300,
    bg: `#C79C77`,
    Height:""          //這是swiper要動態設定的高度屬性
 },
imgHeight:function(e){
    var winWid = wx.getSystemInfoSync().windowWidth; //獲取當前螢幕的寬度
    var imgh=e.detail.height;//圖片高度
    var imgw=e.detail.width;//圖片寬度
    var swiperH=winWid*imgh/imgw + "px"//等比設定swiper的高度。  即 螢幕寬度 / swiper高度 = 圖片寬度 / 圖片高度    ==》swiper高度 = 螢幕寬度 * 圖片高度 / 圖片寬度
    this.setData({
        Height:swiperH//設定高度
    })
},

總結：獲取當前螢幕寬度： wx.getSystemInfoSync().windowWidth
在小程式裡動態設定屬性，只有通過setData（{ }）來設定，和js中直接操作css樣式有一點類似

注意：image如果外層有個容器裝，然後image設定width為100%之後，距離裝它的容器底部有一點距離，那是因為image是預設設定的display:inline-block屬性，這個屬性會產生間隙。如果要撐滿容器，設定為display:block就可以了。

相關文章