微信小程序-微信小程序中的图片自适应宽高的计算类

上传者: 39841882 | 上传时间: 2022-11-15 09:52:50 | 文件大小: 8KB | 文件类型: ZIP
WxAutoImage 来源 微信小程序开发论坛 垂直微信小程序开发交流论坛 有话说 如果你已经看过一段时间的微信小程序后,你会发现,小程序中的图片虽然给了很多种mode,但是在你使用过程中,会出现很尴尬的问题。 比如: 图片很高,但是在显示的时候,只能看到小的缩略图,且如不指定宽高,则在默认渲染中,则宽高都为320,240. 在视觉设计上会有一定的麻烦。 在实际开发中,也有很多人问过我这个问题,今天说一下单图片的适配,多图片我目前还没有找到合适的处理方案,等有了再说。 通过image的bindload来计算自适应宽高 > 微信小程序中image暴漏的函数比较少,但是bindload十分有用。 官方说明: 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} ⚠️: 这里的height:'图片高度px', width:'图片宽度px'都是原始宽高,这就给了我们可以计算的余地 思路 获取图片原始宽高 获取系统屏宽 以原始宽与系统屏宽对比大小,以大者为基准缩放 实现函数

文件下载

资源详情

[{"title":"( 14 个子文件 8KB ) 微信小程序-微信小程序中的图片自适应宽高的计算类","children":[{"title":"WxAutoImage-master","children":[{"title":"pages","children":[{"title":"logs","children":[{"title":"logs.wxml <span style='color:#111;'> 194B </span>","children":null,"spread":false},{"title":"logs.json <span style='color:#111;'> 56B </span>","children":null,"spread":false},{"title":"logs.wxss <span style='color:#111;'> 114B </span>","children":null,"spread":false},{"title":"logs.js <span style='color:#111;'> 280B </span>","children":null,"spread":false}],"spread":true},{"title":"index","children":[{"title":"index.wxss <span style='color:#111;'> 288B </span>","children":null,"spread":false},{"title":"index.wxml <span style='color:#111;'> 524B </span>","children":null,"spread":false},{"title":"index.js <span style='color:#111;'> 422B </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":"utils","children":[{"title":"util.js <span style='color:#111;'> 481B </span>","children":null,"spread":false}],"spread":true},{"title":"app.js <span style='color:#111;'> 719B </span>","children":null,"spread":false},{"title":"LICENSE <span style='color:#111;'> 1.03KB </span>","children":null,"spread":false},{"title":"README.md <span style='color:#111;'> 3.41KB </span>","children":null,"spread":false},{"title":"WxAutoImage","children":[{"title":"WxAutoImage.js <span style='color:#111;'> 1.58KB </span>","children":null,"spread":false}],"spread":true},{"title":"app.json <span style='color:#111;'> 253B </span>","children":null,"spread":false},{"title":"app.wxss <span style='color:#111;'> 204B </span>","children":null,"spread":false}],"spread":true}],"spread":true}]

评论信息

免责申明

【只为小站】的资源来自网友分享,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论 【只为小站】 经营者是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二条之规定,若资源存在侵权或相关问题请联系本站客服人员,zhiweidada#qq.com,请把#换成@,本站将给予最大的支持与配合,做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明