最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
微信小程序获取图片宽度与高度代码示例
时间:2021-03-10 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下微信小程序获取图片宽度与高度代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
起源
最近在做A需求, 其中有个小功能点描述如下: 从配置端返回张图片, 期望宽度不变(750)、高度根据图片自适应.
我以为的
// 为便于讲解, 将css作为style属性绑定[实际不推荐]&& src的值先写死[后期改成接口返回的即可]
我一开始想到的就是: 设置内容区的width: 100%会自动占满屏幕宽度, 高度就会自适应.
实际效果: image占据空间为: 屏幕宽度 x 0
解决方案
核心: 解决如何获取图片的高度
初级方案
重点: 在图片加载完成后获取对应的图片信息.
经查小程序开发文档后发现, 有提供加载成功的回调, 如下:
演示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的效果图:
到了这里, 只需要把src的值改为接口返回的, 是不是就实现了宽度固定、高度自适应的需求了~
-
上一个: 微信小程序请求前置代码方法解析
-
下一个: 微信小程序实现导航功能操作代码示例
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12