WeChat 애플릿에서 이미지 너비 적응 구현

이 글에서는 주로 WeChat 애플릿의 이미지 너비 적응 구현에 대한 관련 정보를 소개합니다. 도움이 필요한 친구는

WeChat 애플릿의 이미지 너비 적응 구현

예제 코드:

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

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 중국사이트!

관련 권장 사항:

WeChat 애플릿에서 앨범 사진을 얻는 방법

WeChat 애플릿에서 보기 레이블 너비와 높이를 동적으로 변경하는 방법

앨범의 적응형 너비 비율을 구현하는 방법 WeChat 애플릿의 이미지 구성 요소 표시 방법

위 내용은 WeChat 애플릿에서 이미지 너비 적응 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!