微信小程序輪播圖的高度自適應問題


我把 swiper 的 width 設定成了屏幕的95%寬度, 如果想寬度也自適應的話請改成  width:{{width*2}}rpx

[html]
<swiper class='advertising2' indicator-dots="true" style='height:{{height*2 +80}}rpx;width:95%;' autoplay="true" interval="4000" duration="1000">  
  <swiper-item wx:for="{{advertising2}}" wx:key="">  
        <view class='store'>{{item.title}}</view>   <!-- store的高度加內外邊距為80rpx,所以在swiper的高度加上80rpx -->  
        <view>  
          <image style='height:{{height*2}}rpx;width:100%;' mode="" src="{{item.image}}" />  
        </view>  
  </swiper-item>  
</swiper> 

 

wx.getImageInfo是官方獲取圖片信息的api , 詳細文檔請查看 https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxgetimageinfoobject 
[javascript]

    wx.getImageInfo({  
      src: advertising2[0].image,  
      success: function (res) {  
        that.setData({  
          height: res.height,  
          width:res.width  
        })  
      }  
    })  


效果圖如下:


2.關於圖片的自適應問題:

使用<image>的mode為widthFix,





注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com