> 위챗 애플릿 > 미니 프로그램 개발 > WeChat 애플릿에서 이미지 너비 적응 구현

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

不言
풀어 주다: 2018-06-27 15:44:51
원래의
2204명이 탐색했습니다.

이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿