网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

怎么在微信小程序中获取图片的宽度与高度-创新互联

这篇文章给大家介绍怎么在微信小程序中获取图片的宽度与高度,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联公司公司2013年成立,是专业互联网技术服务公司,拥有项目网站设计、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元惠州做网站,已为上家服务,为惠州各地企业和个人服务,联系电话:18980820575

重点: 在图片加载完成后获取对应的图片信息.

经查小程序开发文档后发现, 有提供加载成功的回调, 如下:

怎么在微信小程序中获取图片的宽度与高度

演示Demo如下:

// wxml

 


//js
Page({
 data: {
 imageHeight: 0,
 imageWidth: 0
 },
 loadSuccess(e){
 const { detail: {width, height} } = e
 this.setData({
  imageWidth: width,
  imageHeight:height
 })
 }
})

先来看看效果:

怎么在微信小程序中获取图片的宽度与高度

思考个问题:  假设我有100张图片都需要做自适应, 那么是不是多了很多繁琐的setData(), 同时也会导致性能问题.

进阶方案

经朋友提醒后发现, 小程序image还有个属性叫做mode, 可以去设置图片的裁剪&缩放等形式.

怎么在微信小程序中获取图片的宽度与高度

关于mode属性的取值可选项如下图:

怎么在微信小程序中获取图片的宽度与高度

话不多说, 我们看看实际效果如何:

// 750x110的图片

 


// 750x480的图片

 

看看750x110的效果图:

怎么在微信小程序中获取图片的宽度与高度

再看看750x480的效果图:

怎么在微信小程序中获取图片的宽度与高度

关于怎么在微信小程序中获取图片的宽度与高度就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


名称栏目:怎么在微信小程序中获取图片的宽度与高度-创新互联
网页路径:http://bjjierui.cn/article/cdeieo.html

其他资讯