首頁 > 微信小程式 > 小程式開發 > 微信小程式中圖片寬度自適應的實現

微信小程式中圖片寬度自適應的實現

不言
發布: 2018-06-27 15:44:51
原創
2263 人瀏覽過

這篇文章主要介紹了微信小程式圖片寬度自適應的實現的相關資料,需要的朋友可以參考下

 微信小程式圖片寬度自適應的實現

實例程式碼:

wxml 程式碼:

#

1

2

3

4

5

6

7

<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 程式碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

 })

}

登入後複製

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

微信小程式如何取得相簿照片

在微信小程式中如何實作動態改變view標籤寬度與高度

微信小程式如何實作image元件圖片自適應寬度比例顯示的方法

以上是微信小程式中圖片寬度自適應的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
現在個人嫩申請微信小程序
來自於 1970-01-01 08:00:00
0
0
0
微信小程式
來自於 1970-01-01 08:00:00
0
0
0
微信小程式輪播
來自於 1970-01-01 08:00:00
0
0
0
微信小程式自動補全工具
來自於 1970-01-01 08:00:00
0
0
0
微信小程式中用ajax呼叫後台接口
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板