本文主要介紹了微信小程式實現image元件圖片自適應寬度比例顯示的方法,簡單講述了image元件的常用屬性,並結合實例形式分析了微信小程式實現圖片自適應寬度比例的相關操作技巧,需要的朋友可以參考下,希望能幫助大家。
本文實例講述了微信小程式實作image元件圖片自適應寬度比例顯示的方法。分享給大家供大家參考,具體如下:
一. 了解image元件
二.方法
#(一).使用mode:widthFix
#widthFix:寬度不變,高度自動變化,原圖寬高比不變。首先我們先設定image的mode為widthFix,然後再為圖片加上一個固定rpx的寬度,例如:730rpx。
(二).使用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 }) } })
以上是微信小程式實作image元件圖片自適應寬度比例實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影:貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Linux新版
SublimeText3 Linux最新版

Atom編輯器mac版下載
最受歡迎的的開源編輯器

SublimeText3漢化版
中文版,非常好用