微信小程序 圖片寬度自適應(yīng)的實(shí)現(xiàn)
更新時(shí)間：2017年04月06日 17:12:27 投稿：lqh
這篇文章主要介紹了微信小程序 圖片寬度自適應(yīng)的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
微信小程序 圖片寬度自適應(yīng)的實(shí)現(xiàn)
實(shí)例代碼：
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,//是否顯示圓點(diǎn)
autoplay: true,//自動(dòng)播放
interval: 2000,//間隔時(shí)間
duration: 1000//監(jiān)聽(tīng)滾動(dòng)和點(diǎn)擊事件
})
}
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
npm?start運(yùn)行項(xiàng)目過(guò)程package.json字段詳解
這篇文章主要為大家介紹了npm?start運(yùn)行項(xiàng)目過(guò)程package.json字段詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
實(shí)現(xiàn)一個(gè)簡(jiǎn)單得數(shù)據(jù)響應(yīng)系統(tǒng)
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)簡(jiǎn)單得數(shù)據(jù)響應(yīng)系統(tǒng)，文章介紹的數(shù)據(jù)響應(yīng)系統(tǒng)會(huì)用到Dep，其實(shí)，這就是一個(gè)依賴收集的容器， depend 收集依賴， notify 觸發(fā)依賴，下面來(lái)看看詳細(xì)的內(nèi)容結(jié)介紹,需要的朋友可以參考一下2021-11-11
ResizeObserver 監(jiān)視 DOM大小變化示例詳解
這篇文章主要為大家介紹了ResizeObserver 監(jiān)視 DOM大小變化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
微信小程序 高德地圖SDK詳解及簡(jiǎn)單實(shí)例（源碼下載）
這篇文章主要介紹了微信小程序 高德地圖詳解及簡(jiǎn)單實(shí)例（源碼下載）的相關(guān)資料,需要的朋友可以參考下2017-01-01
JavaScript中document.activeELement焦點(diǎn)元素介紹
這篇文章主要給大家分享 JavaScript中document.activeELement焦點(diǎn)元素介紹，下面文章圍繞了document.activeElement屬性展開(kāi)詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)大家有所幫助2021-11-11
微信小程序page的生命周期和音頻播放及監(jiān)聽(tīng)實(shí)例詳解
這篇文章主要介紹了微信小程序page的生命周期和音頻播放及監(jiān)聽(tīng)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
Three.js添加陰影和簡(jiǎn)單后期處理實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了Three.js添加陰影和簡(jiǎn)單后期處理實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
JS前端可視化canvas動(dòng)畫(huà)原理及其推導(dǎo)實(shí)現(xiàn)
這篇文章主要為大家介紹了JS前端可視化canvas動(dòng)畫(huà)原理及其推導(dǎo)實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序 location API實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了使用yeoman打造自己的項(xiàng)目腳手架實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03