转自 http://blog.csdn.net/xz_src/article/details/73827917
微信小程序 图片宽度自适应的实现
实例代码:
wxml 代码:
- <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 代码:
- 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
- })
- }