您的位置:首页 > 移动开发 > 微信开发

微信小程序 图片宽度自动

2017-04-05 15:07 162 查看
//js
<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>

//wxml
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//监听滚动和点击事件
 })
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息