|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 這篇文章主要介紹了微信小程序實現image組件圖片自適應寬度比例顯示的方法,簡單講述了image組件的常用屬性,并結合實例形式分析了微信小程序實現圖片自適應寬度比例的相關操作技巧,需要的朋友可以參考下本文實例講述了微信小程序實現image組件圖片自適應寬度比例顯示的方法。分享給大家供大家參考,具體如下: 一. 了解image組件
由于image有默認的固定的寬度和高度,這樣我們在做圖片自適應的時候,就不好做了。下面就來一起解決下 二. 方法 (一).使用mode:widthFix widthFix:寬度不變,高度自動變化,保持原圖寬高比不變。 這樣圖片也可以自適應了。。因為小程序的rpx本身就是一個自適應顯示的單位 (二).使用bindload綁定函數動態自適應。 我們可以給image綁定一個函數,這個函數,如上面的bindload說明一樣,我們可以獲取到原圖的寬度和高度。 然后計算他們的寬高比率。。然后設置一個寬度大小(rpx),最后通過style動態設置image的寬高。代碼如下: 1. 編寫頁面結構index.wxml: <image src="../uploads/2.jpg" bindload="imageLoad"
style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>2. 設置數據index.js //獲取應用實例
var app = getApp()
Page({
data: {
screenWidth: 0,
screenHeight:0,
imgwidth:0,
imgheight:0,
},
onLoad: function() {
var _this = this;
wx.getSystemInfo({
success: function(res) {
_this.setData({
screenHeight: res.windowHeight,
screenWidth: res.windowWidth,
});
}
});
},
imageLoad: function(e) {
var _this=this;
var $width=e.detail.width, //獲取圖片真實寬度
$height=e.detail.height,
ratio=$width/$height; //圖片的真實寬高比例
var viewWidth=500, //設置圖片顯示寬度,
viewHeight=500/ratio; //計算的高度值
this.setData({
imgwidth:viewWidth,
imgheight:viewHeight
})
}
})
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! 相關推薦: 以上就是微信小程序如何實現image組件圖片自適應寬度比例顯示的方法的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!