第微信小程序圖片自適應(yīng)支持多圖實例詳解varviewWidth=710,viewHeight//設(shè)定一個初始寬度

//當它的寬度大于初始寬度時，實際效果跟mode=widthFix一致

if(originWidth=viewWidth){

//寬度等于viewWidth,只需要求出高度就能實現(xiàn)自適應(yīng)

viewHeight=viewWidth/ratio;

}else{

//如果寬度小于初始值，這時就不要縮放了

viewWidth=originWidth;

viewHeight=originHeight;

varimageSize=this.data.imageSize;

imageSize[e.target.dataset.index]={

width:viewWidth,

height:viewHeight

this.setData({

imageSize:imageSize

如果我們的圖片中不僅限定了寬度，還限定了高度值，比如我們限定max-height之類的。那我們的imageLoad函數(shù)則要調(diào)整為根據(jù)他們的寬高比來輸出。

imageLoad:function(e){

varoriginWidth=e.detail.width*px2rpx,

originHeight=e.detail.height*px2rpx,

ratio=originWidth/originHeight;

varviewWidth=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;

varimage=this.data.imageSize;

image[e.target.dataset.index]={

width:viewWidth,

height:viewHeight

this.setData({

imageSize:image

附錄：小圖預覽，進入全屏模式。

用預覽圖片的API，wx.previewImage(OBJECT)以下是對應(yīng)的代碼，樣式部分，自行布局。

HTML代碼：

view

imagewx:for="{{pictures}}"wx:key="unique"src="{{item}}"data-index="{{index}}"bindtap="previewImage"/image

/view

JS

Page({

data:{

pictures:[

'/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',

'/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',

'/movie/0c49f98a93881b65b58c349eed219dba290900.jpg',

'/movie/45f98822bd15082ae3932b6108b17a01265779.jpg',

'/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg',

'/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg',

'/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg',

'/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg'

previewImage:function(e){

varthat=this,

index=e.currentTarget.dataset.index,

pictures=this.data.