小程序中图片高度等比缩放

前言:小程序中的image组件,有默认的宽度(320px)和高度(240px),如果想让图片按比例显示,那就需要自己设置宽度 & 高度。今天来说一下图片等比缩放的实现。

bindload中处理

✦✦01✦✦

WXML代码:

<view class='main-content' wx:for="{{detail.content}}">
  <image src="{{item.img}}" class="img" bindload='imgLoad' style='height: {{item.height}}rpx;' data-index="{{index}}"/>
  <text class='content' selectable='true'>{{item.desc}}</text>
</view>

在bindload中去计算图片的高度。

JS代码:

imgLoad: function (e) {
  var index = e.currentTarget.dataset.index;
  var detail = this.data.detail;
  var height = Math.ceil(e.detail.height * 750 / e.detail.width);
  detail.content[index].height = height;
  this.setData({
    detail: detail
  })
}

等比缩放图片已经搞定~

mode设置为widthFix

✦✦02✦✦

仔细查看官方文档:mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。

widthFix模式:宽度不变,高度自动变化,保持原图宽高比不变

看一下效果:

<image src='1.jpg' mode='widthFix'></image>
<image src='1.jpg'></image>

和第一种的实现效果是一样的,用这种方式就不用JS计算了,省去了不少代码,很实用。

然后特意去查了一下,widthFix这个值是在 0.11.122100 版本中更新的,确实要多看文档了~

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2017-10-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SHERlocked93的前端小站

一个骚气的文章目录自动生成器了解一下

这个插件根据选定的目录内容中的 h1, h2, h3, h4, h5, h6 标签来自动生成目录插入到选定的目录容器中,并且提供一个漂亮的样式效果

762
来自专栏用户2442861的专栏

QLineEdit 输入验证(相关的设置)

LineEdit提 供一个文字输入栏位,可以输入文字或数字,我们可以对输入作验证,或是设定为一般显示、密码显示等等,以下的程式是个简单的设定示范:

952
来自专栏刘笑江的专栏

iOS 私有 API 调用检测机制探讨

最近发现部分 App 以字符串拼接的方法调用私有 API,在提交 AppStore 审核后被发现打回修改的案例。

2284
来自专栏前端侠2.0

文本过长后,显示省略号。ff特有的hack方法。

看了这篇文章,http://www.w3cplus.com/content/css3-text-overflow

811
来自专栏朱慕之的博客

单元测试

在计算机编程中,单元测试(英语:Unit Testing)又称为模块测试, 是针对程序模块的最小单位来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。...

602
来自专栏有趣的Python

7- vue django restful framework 打造生鲜超市 -商品类别数据展示(上)

Vue+Django REST framework实战 搭建一个前后端分离的生鲜超市网站 Django rtf 完成 商品列表页 并没有将列表页的数据j...

42312
来自专栏草根专栏

测试 ASP.NET Core API Controller

本文需要您了解ASP.NET Core MVC/Web API, xUnit以及Moq相关知识.

834
来自专栏数据的力量

职场人必备的WORD排版十大技巧

2017
来自专栏技术栈大杂烩

Python爬虫: CU shell 板块

身为运维岗的小屌丝, 对于shell, 甚至文本三剑客, 总是不可分割的, 因为工作上, 特别是日志处理查找等, 更能体现出三剑客的强大功力. 虽然说教程网上都...

1093
来自专栏布尔

select元素的options.add 与 insertbefore的区别

之前提到如果想改变元素的视觉效果(checkbox.checked=true会打钩),请在把元素添加到页面上再为其赋值,否则赋值无效。下拉框元素也有这样的问题,...

1937

扫码关注云+社区