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

2023年9月25日 153次阅读 来源: hover_lew

小順序中的輪播圖很簡單，官方都有例子的，然則唯一的缺點就是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就能夠了。

    原文作者：hover_lew
    原文地址: https://segmentfault.com/a/1190000014537334
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞