微信小程序图片显示不全
来源:互联网 发布:java可以有多个main 编辑:程序博客网 时间:2024/04/29 15:59
最近小程序蛮火。
直入主题: 对于一张网络图片高度太高,而显示不全如何解决?
其实我一贯的观点是,所有的问题从api中都能够找到答案,只是有时候缺少耐
心,而没有好好去读官方api,出现问题后着急的google、百度、github... 下面我们来看下api 怎么说的:
image
图片。
注:image组件默认宽度300px、高度225px
mode有12种模式,其中3种是缩放模式,9种是裁剪模式。
特别注意:“注”的位置 说了,如果image标签不写宽高属性,则默认显示宽度300px、高度225px。所以如下方法就可以在图片下载成功后拿到图片的宽高属性值了,如下:
WXML:
<image style="width: {{imageWidth}}px; height: {{imageHeight}}px;" src="{{imgurl}}" mode="aspectFill" bindload="imgload"></image>
JS:
Page({ data:{ imgurl:'http://hukang02.b0.upaiyun.com/1480321452672.jpg', imageWidth:0, imageHeight:0 }, imgload: function(e){ console.log("图片加载完成="+e.detail); //用来计算高宽 this.setData(wxAutoImageCal(e)); }})
上面方法就可以得到图片的高宽打印的数据是:{width:720,height:1546}
接下来是如何显示的问题:
如果图片宽度大于屏幕宽度,则显示屏幕宽度大小,此时图片高度需要等比例压缩;
如果图片宽度小于等于屏幕宽度,则正常显示图片宽高。
以下方法是根据屏幕宽度比较宽度大小,从而计算显示的高宽:
function wxAutoImageCal(e){ //获取图片的原始长宽 var originalWidth = e.detail.width; var originalHeight = e.detail.height; var windowWidth = 0,windowHeight = 0; var imageWidth= 0,imageHeight= 0; var results= {}; //获取屏幕信息 wx.getSystemInfo({ success: function(res) { windowWidth = res.windowWidth; windowHeight = res.windowHeight; //判断按照那种方式进行缩放 if(originalWidth > windowWidth){//在图片width大于手机屏幕width时候 imageWidth= windowWidth; imageHeight= (imageWidth*originalHeight)/originalWidth; results.imageWidth= imageWidth; results.imageHeight= imageHeight; }else{//否则展示原来的数据 results.imageWidth= originalWidth; results.imageHeight= originalHeight; } } }) return results; }
如上,大功告成了,显示如下
1 0
- 微信小程序图片显示不全
- firefox 图片显示不全
- Word2007图片显示不全解决方法
- word插入图片显示不全
- word 嵌入式插入图片 图片显示不全
- 微信小程序图片显示
- IE下fancybox显示图片不全问题
- Word2013 图片或数学公式显示不全解决方法
- 关于Viewpager加载网络图片显示不全
- listview Recycleview中imageview图片显示不全
- 【最强解决办法】打印图片显示不全…
- WebView加载网页图片显示不全或显示不完整
- word图片不显示或显示不全怎么办?
- WORD故障解决一:图片插入后显示不全
- 360极速浏览器ico图片显示不全
- 常见字体显示不全、图片上文字覆盖等问题
- echarts工具栏中的下载图片的提示字显示不全
- word使用技巧---插入图片显示不全的解决方案
- 你不知道的 Javascript
- raw socket的使用
- I coming!
- 开发中有没有遇到过特别难以交流的测试人员?
- · 寒窑赋 ·
- 微信小程序图片显示不全
- hibernate中在映射文件中控制insert和update的内容
- Visual Studio 2015 小技巧
- java 报‘java.net.UnknownHostException:错误
- 每天少不了的几道题,代码不能停(1)
- web前端移动端项目测试的几种方法
- jquery动态绑定事件
- java利用jxl.jar创建、读取EXCEL文件
- jmeter测试脚本录制方法(基于http请求)