這篇文章主要介紹了微信小程式圖片寬度自適應的實現的相關資料,需要的朋友可以參考下
微信小程式圖片寬度自適應的實現
實例程式碼:
wxml 程式碼:
#
1 2 3 4 5 6 7 | <swiper indicator-dots= "{{indicatorDots}}" autoplay= "{{autoplay}}" interval= "{{interval}}" duration= "{{duration}}" >
<block wx: for = "{{imgUrls}}" wx:key= "image" >
<swiper-item>
<image src= "{{item.image}}" model= "aspectFit" style= "width: {{imageWidth}}px;" bindload= "imageLoad" />
</swiper-item>
</block>
</swiper>
|
登入後複製
JS 程式碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | imageLoad: function () {
this.setData({
imageWidth: wx.getSystemInfoSync().windowWidth,
imgUrls: [
{ image: "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" },
{ image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" },
{ image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg" }],
indicatorDots: false,
autoplay: true,
interval: 2000,
duration: 1000
})
}
|
登入後複製
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
微信小程式如何取得相簿照片
在微信小程式中如何實作動態改變view標籤寬度與高度
微信小程式如何實作image元件圖片自適應寬度比例顯示的方法
以上是微信小程式中圖片寬度自適應的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!