Implementation of image width adaptation in WeChat applet

This article mainly introduces the relevant information on the implementation of image width adaptation in WeChat applet. Friends in need can refer to

Implementation of image width adaptation in WeChat applet

Example code:

wxml code:

<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 code:

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//监听滚动和点击事件 
 }) 
}

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to obtain album photos in the WeChat applet

How to dynamically change the view label in the WeChat applet Width and height

How does the WeChat applet realize the adaptive width ratio display of the image component picture

The above is the detailed content of Implementation of image width adaptation in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!