這篇文章主要介紹了微信小程式如何實現圖片自適應的相關資料,文中介紹的方法同樣適應於多圖,有需要的朋友可以參考借鑒,下面來一起看看吧。
大家都知道微信小程式圖片自適應,是一個比較常見的需求,平時我們在WEBView中,只需要設定max-width:100%
.在微信裡面雖然widthFix也能實現,但有一個缺陷就是圖片的寬度值要大於或等於設定的值,否則就會發生拉伸變形,本文透過另一種來適應。
首先我們來看看圖片組件給的一些說明:
屬性名稱 |
型 |
預設值 |
說明 |
型
預設值
說明 |
| 圖片資源位址
|
mode |
String
'scaleToFill' |
圖片裁切、縮放的模式 |
|
binderror ,事件物件event .detail = {errMsg: 'something wrong'} |
bindload |
HandleEvent |
|
當圖片載入完畢時,發佈到AppService 的事件物件名稱,事件物件尺寸px', width:'圖片寬度px'} |
|
| 註:
image元件預設寬度300px、高度225px |
| mode 有13 種縮放模式,其中4 種是縮放模式模式。
模式說明
scaleToFill不保持縱桿比填滿圖片,使圖片的寬度完全拉伸至圖片的寬泛元素填滿圖片,使圖片的寬度完全充滿尺寸橫比縮放圖片,使圖片的長邊能完全顯示出來。也就是說,可以完整地將圖片顯示出來。 |
| aspectFill
保持縱橫比縮放圖片,只保證圖片的短邊能完全顯示出來。也就是說,圖片通常只在水平或垂直方向是完整的,另一個方向將會發生截取。
| widthFix | 寬度不變,高度自動變化,保持原圖寬高比不變
|
如果說要有一種比較合適的方案,大概是widthFix,然而 |
如果說要有一種比較合適的方案,大概是widthFix,然而這些模式中,所要求上面的前提是需要為圖片標籤設定一個寬度值或一個高度值。但有時候我們根本不想限定圖片的寬高,我們需要的是圖片本身能夠依照自身的大小來適配。
| 而widthFix模式就要求你必須先設定一個寬度值,如果出來的圖片比給定的width小呢?此時圖片則會發生拉伸的現象。 (常見應用在文章中,因為文章中的插圖有可能比預設的寬小,例如常見的表情)。 |
其實上面的標籤中,圖片為我們預留了一個函數bindLoad。下面看看我是怎麼支持自適應的。
| 有一個前提,就是多圖的時候,你需要知道這張圖片是處於所有中的位置index,我們透過這個位置來保存圖片的寬度和高度。 | <image src="http://ww4.sinaimg.cn/bmiddle/006q8Q6bjw1fbwucs1cctj30t80t8myh.jpg" bindLoad="imageLoad" style="width:{{imageSize[0].width}}rpx;
height:{{imageSize[0].height}}rpx" data-index="0" mode="scaleToFill"/>
<image src="http://ww4.sinaimg.cn/bmiddle/006q8Q6bjw1fbwucs1cctj30t80t8myh.jpg" bindLoad="imageLoad" style="width:{{imageSize[1].width}}rpx;
height:{{imageSize[1].height}}rpx" data-index="1" mode="scaleToFill"/>
var px2rpx = 2, windowWidth=375;
page({
data:{
imageSize:{}
},
onLoad:function(options){
wx.getSystemInfo({
success: function(res) {
windowWidth = res.windowWidth;
px2rpx = 750 / windowWidth;
}
})
},
imageLoad:function(e){
//单位rpx
var originWidth = e.detail.width*px2rpx,
originHeight = e.detail.height*px2rpx,
ratio = originWidth/originHeight;
var viewWidth = 710,viewHeight//设定一个初始宽度
//当它的宽度大于初始宽度时,实际效果跟mode=widthFix一致
if(originWidth>= viewWidth){
//宽度等于viewWidth,只需要求出高度就能实现自适应
viewHeight = viewWidth/ratio;
}else{
//如果宽度小于初始值,这时就不要缩放了
viewWidth = originWidth;
viewHeight = originHeight;
}
var imageSize = this.data.imageSize;
imageSize[e.target.dataset.index] = {
width:viewWidth,
height:viewHeight
}
this.setData({
imageSize:imageSize
})
}
})
如果我們的圖片中不僅限定了寬度,還限定了高度值,例如我們限定max-height之類的。那我們的imageLoad函數要調整為根據他們的寬高比來輸出。 imageLoad:function(e){
var originWidth = e.detail.width * px2rpx,
originHeight=e.detail.height *px2rpx,
ratio = originWidth/originHeight ;
var viewWidth = 220,viewHeight = 165, viewRatio = viewWidth/viewHeight;
if(ratio>=viewRatio){
if(originWidth>=viewWidth){
viewHeight = viewWidth/ratio;
}else{
viewWidth = originWidth;
viewHeight = originHeight
}
}else{
if(originWidth>=viewWidth){
viewWidth = viewRatio*originHeight
}else{
viewWidth = viewRatio*originWidth;
viewHeight = viewRatio*originHeight;
}
}
var image = this.data.imageSize;
image[e.target.dataset.index]={
width:viewWidth,
height:viewHeight
}
this.setData({
imageSize:image
})
},
附錄:小圖預覽,進入全螢幕模式。
用預覽圖片的API,wx.previewImage(OBJECT)
以下是對應的程式碼,樣式部分,自行佈局。
html代碼:
<view class="wrap">
<image wx:for="{{pictures}}" wx:key="unique" src="{{item}}" data-index="{{index}}" bindtap="previewImage"></image>
</view>
JSPage({
data: {
pictures: [
'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',
'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',
'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg',
'https://p1.meituan.net/movie/45f98822bd15082ae3932b6108b17a01265779.jpg',
'https://p1.meituan.net/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg',
'https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg',
'https://p1.meituan.net/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg',
'https://p1.meituan.net/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg'
]
},
previewImage: function(e){
var that = this,
index = e.currentTarget.dataset.index,
pictures = this.data.pictures;
wx.previewImage({
current: pictures[index],
urls: pictures
})
}
})
更多微信小程式實現圖片自適應(支援多圖)相關文章請關注PHP中文網!