Implémentation de l'adaptation de la largeur de l'image dans l'applet WeChat

Cet article présente principalement les informations pertinentes sur la mise en œuvre de l'adaptation de la largeur de l'image dans l'applet WeChat. Les amis dans le besoin peuvent se référer à

Implémentation de l'adaptation de la largeur de l'image dans l'applet WeChat

.

Exemple de code :

Code 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>

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web chinois PHP !

Recommandations associées :

Comment obtenir des photos d'album dans l'applet WeChat

Comment changer dynamiquement l'étiquette de vue dans l'applet WeChat Largeur et hauteur

Comment l'applet WeChat implémente l'affichage adaptatif de la proportion de largeur des images des composants d'image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!