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

前言:小程序中的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 条评论
登录 后参与评论

相关文章

来自专栏Ken的杂谈

JS/Jquery解决回车键触发表单提交问题

因为现在大多数浏览器,当表单中的文本框或其他可提交元素为当前焦点时,敲回车键就会触发表单提交。

592
来自专栏前端知识分享

第53天:鼠标事件、event事件对象

-->鼠标事件 -->event事件对象 -->默认事件 -->键盘事件(keyCode) -->拖拽效果

612
来自专栏菜鸟前端工程师

html+css学习笔记001-常用标签

642
来自专栏州的先生

在Python GUI中实现一个拖放功能

1021
来自专栏前端架构

onunload、onbeforeunload事件详解

最近项目中做到一个功能:在上传页面用户开始上传文件之后用户点击任意跳转都需要弹出提示层进行二次确定才允许他进行跳转,这样做的目的是为了防止用户的错误操作导致这珍...

554
来自专栏九彩拼盘的叨叨叨

CSS3的属性值unset

属性值unset的值为:如果该样式是能被继承的,则其值为继承的值;如果该样式是不能被继承的,则其值为CSS规范(CSS specifications)指定的值。

621
来自专栏编程微刊

前端切图:CSS实现隐藏滚动条同时又可以滚动

1283
来自专栏张戈的专栏

利用placeholder属性来添加输入框默认文字提示,提高用户体验

这个是我老早就在用的方法,本不打算分享,因为网上随便都能搜得到,感觉没有分享的必要。鉴于中国博客联盟有朋友问到了这问题,所以还是简单的整理下,希望能帮到部分不了...

2979
来自专栏林德熙的博客

win10 uwp 获得焦点改变 如何判断应用是否获得焦点

本文讲的是当我们应用失去焦点时,我们获得事件,当我们应用获得焦点,同样获得事件。同时,在应用不可以见时,我们也可以获得。

241
来自专栏计算机编程

【vue随手笔记】MuseUI 自定义 select 适配 mobile

通过 emit将result值发给外部实现字父组件的双向绑定,于是父组件获取result值即:

602

扫描关注云+社区