微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法
本文實(shí)例講述了微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法。分享給大家供大家參考，具體如下：
一. 了解image組件
由于image有默認(rèn)的固定的寬度和高度，這樣我們在做圖片自適應(yīng)的時(shí)候，就不好做了。下面就來一起解決下
二. 方法
(一).使用mode：widthFix
widthFix：寬度不變，高度自動變化，保持原圖寬高比不變。
首先我們先設(shè)置image的mode為widthFix，然后給圖片加一個固定rpx的寬度，比如：730rpx。
這樣圖片也可以自適應(yīng)了。。因?yàn)樾〕绦虻膔px本身就是一個自適應(yīng)顯示的單位
(二).使用bindload綁定函數(shù)動態(tài)自適應(yīng)。
我們可以給image綁定一個函數(shù)，這個函數(shù)，如上面的bindload說明一樣，我們可以獲取到原圖的寬度和高度。
然后計(jì)算他們的寬高比率。。然后設(shè)置一個寬度大?。╮px），最后通過style動態(tài)設(shè)置image的寬高。代碼如下：
1. 編寫頁面結(jié)構(gòu)index.wxml：
<image src="../uploads/2.jpg" bindload="imageLoad"
style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>
2. 設(shè)置數(shù)據(jù)index.js
//獲取應(yīng)用實(shí)例
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, //獲取圖片真實(shí)寬度
$height=e.detail.height,
ratio=$width/$height; //圖片的真實(shí)寬高比例
var viewWidth=500, //設(shè)置圖片顯示寬度，
viewHeight=500/ratio; //計(jì)算的高度值
this.setData({
imgwidth:viewWidth,
imgheight:viewHeight
})
}
})
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
countup.js實(shí)現(xiàn)數(shù)字動態(tài)疊加效果
這篇文章主要為大家詳細(xì)介紹了countup.js實(shí)現(xiàn)數(shù)字動態(tài)疊加效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了微信小程序生成分享海報(bào)方法（附帶二維碼生成），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
基于JavaScript實(shí)現(xiàn)網(wǎng)頁計(jì)算器
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)網(wǎng)頁計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
JavaScript的public、private和privileged模式
公共/私有變量和方法通過一個簡單的的例子，來展示如何使用JavaScript在類里面創(chuàng)建私有變量和方法2009-12-12
el-form實(shí)現(xiàn)表單和圖片手動上傳和校驗(yàn)功能
在寫項(xiàng)目時(shí),難免遇到需要上傳表單,圖片等文件,且表單內(nèi)容需進(jìn)行驗(yàn)證及必填項(xiàng)提示,圖片需要和信息一起傳遞且圖片載入后需可預(yù)覽,這篇文章給大家介紹el-form實(shí)現(xiàn)表單和圖片手動上傳和校驗(yàn)功能,感興趣的朋友一起看看吧2024-01-01
微信小程序數(shù)據(jù)分析之自定義分析的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序數(shù)據(jù)分析之自定義分析的實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)錄音上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了JS如何獲取Promise對象里面的值問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
javascript在firefox下設(shè)為首頁的代碼
javascript在firefox下設(shè)為首頁的代碼...2007-09-09
window.location和document.location的區(qū)別分析
用戶不能改變document.location(因?yàn)檫@是當(dāng)前顯示文檔的位置)。但是,可以改變window.location (用其它文檔取代當(dāng)前文檔)window.location本身也是一個對象,而document.location不是對象2008-12-12