微信小程序實現image組件圖片自適應寬度比例顯示的方法
更新時間：2018年01月16日 14:26:35 作者：面條請不要欺負漢堡
這篇文章主要介紹了微信小程序實現image組件圖片自適應寬度比例顯示的方法,簡單講述了image組件的常用屬性,并結合實例形式分析了微信小程序實現圖片自適應寬度比例的相關操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序實現image組件圖片自適應寬度比例顯示的方法。分享給大家供大家參考，具體如下：
一. 了解image組件
由于image有默認的固定的寬度和高度，這樣我們在做圖片自適應的時候，就不好做了。下面就來一起解決下
二. 方法
(一).使用mode：widthFix
widthFix：寬度不變，高度自動變化，保持原圖寬高比不變。
首先我們先設置image的mode為widthFix，然后給圖片加一個固定rpx的寬度，比如：730rpx。
這樣圖片也可以自適應了。。因為小程序的rpx本身就是一個自適應顯示的單位
(二).使用bindload綁定函數動態(tài)自適應。
我們可以給image綁定一個函數，這個函數，如上面的bindload說明一樣，我們可以獲取到原圖的寬度和高度。
然后計算他們的寬高比率。。然后設置一個寬度大小（rpx），最后通過style動態(tài)設置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
})
}
})
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關文章
這篇文章主要為大家詳細介紹了countup.js實現數字動態(tài)疊加效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了微信小程序生成分享海報方法（附帶二維碼生成），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要為大家詳細介紹了基于JavaScript實現網頁計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
JavaScript的public、private和privileged模式
公共/私有變量和方法通過一個簡單的的例子，來展示如何使用JavaScript在類里面創(chuàng)建私有變量和方法2009-12-12
在寫項目時,難免遇到需要上傳表單,圖片等文件,且表單內容需進行驗證及必填項提示,圖片需要和信息一起傳遞且圖片載入后需可預覽,這篇文章給大家介紹el-form實現表單和圖片手動上傳和校驗功能,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了微信小程序數據分析之自定義分析的實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了小程序實現錄音上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了JS如何獲取Promise對象里面的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
javascript在firefox下設為首頁的代碼...2007-09-09
window.location和document.location的區(qū)別分析
用戶不能改變document.location(因為這是當前顯示文檔的位置)。但是,可以改變window.location (用其它文檔取代當前文檔)window.location本身也是一個對象,而document.location不是對象2008-12-12