微信小程序图片显示不全

最近小程序蛮火。

    直入主题： 对于一张网络图片高度太高，而显示不全如何解决？

    其实我一贯的观点是，所有的问题从api中都能够找到答案，只是有时候缺少耐
心，而没有好好去读官方api,出现问题后着急的google、百度、github... 下面我们来看下api 怎么说的：

 

image

 

图片。

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式
binderror	HandleEvent		当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
bindload	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

注：image组件默认宽度300px、高度225px

mode有12种模式，其中3种是缩放模式，9种是裁剪模式。

 

特别注意：“注”的位置 说了，如果image标签不写宽高属性，则默认显示宽度300px、高度225px。所以如下方法就可以在图片下载成功后拿到图片的宽高属性值了，如下：

WXML:

[html] view plain copy  print?

1. <image style="width: {{imageWidth}}px; height: {{imageHeight}}px;" src="{{imgurl}}"  mode="aspectFill" bindload="<span style="color:#FF0000;"><strong>imgload</strong></span>"></image>  

JS:

 

[javascript] view plain copy  print?

1. Page({  
2.   data:{  
3.     imgurl:'http://hukang02.b0.upaiyun.com/1480321452672.jpg',  
4.     imageWidth:0,  
5.     imageHeight:0   
6.  },  
7.   <span style="color:#CC0000;"><strong>imgload</strong></span>: function(e){  
8.     console.log("图片加载完成="+e.detail);  
9.     //用来计算高宽  
10.     this.setData(wxAutoImageCal(e));  
11.  }  
12. })  

上面方法就可以得到图片的高宽

 

打印的数据是：{width:720,height:1546}

接下来是如何显示的问题:

    如果图片宽度大于屏幕宽度，则显示屏幕宽度大小，此时图片高度需要等比例压缩；

    如果图片宽度小于等于屏幕宽度，则正常显示图片宽高。

以下方法是根据屏幕宽度比较宽度大小，从而计算显示的高宽：

 

[javascript] view plain copy  print?

1. function wxAutoImageCal(e){  
2.     //获取图片的原始长宽  
3.     var originalWidth = e.detail.width;  
4.     var originalHeight = e.detail.height;  
5.     var windowWidth = 0,windowHeight = 0;  
6.     var imageWidth= 0,imageHeight= 0;  
7.     var results= {};  
8.    //获取屏幕信息  
9.   wx.getSystemInfo({  
10.       success: function(res) {  
11.         windowWidth = res.windowWidth;  
12.         windowHeight = res.windowHeight;  
13.         //判断按照那种方式进行缩放  
14.         if(originalWidth > windowWidth){//在图片width大于手机屏幕width时候  
15.           imageWidth= windowWidth;  
16.           imageHeight= (imageWidth*originalHeight)/originalWidth;  
17.           results.imageWidth= imageWidth;  
18.           results.imageHeight= imageHeight;  
19.         }else{//否则展示原来的数据  
20.           results.imageWidth= originalWidth;  
21.           results.imageHeight= originalHeight;  
22.         }  
23.       }  
24.     })  
25.     return results;  
26.   }  

如上，大功告成了，显示如下