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

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

相关文章

来自专栏无原型不设计

如何用Mockplus快速做一个手风琴菜单?

手风琴菜单是一种比较常用的菜单形式,利用原型工具来做这种菜单通常要用到中继器。即使是功能强大的Axure,想实现该效果也比较麻烦。但如果你对Mockplus有...

2644
来自专栏一“技”之长

标签之美一——HTML基础元素 原

HTML是一种标记语言,因此,标签便是HTML的核心,一些基础标签的用法总结如下:

1082
来自专栏针针小站

【IFE】Day 2 – 百度前端技术学院 基础学院 学习笔记(二)

1214
来自专栏移动开发

Material Design Button 的 disable 效果

针对 Material Design Button 的 disable 效果这里提一下. 我们经常有这样的需要,在按钮在 disable 状态下,背景色会呈现深...

1175
来自专栏腾讯云商业智能分析团队的专栏

普通表格常见设置

表格组件是以表格的形式展现数据的载体,表格可以绑定任意一查询的多个字段。根据是否给字段使用统计函数来区分,可划分为细节数据表格和汇总表格。

1541
来自专栏无原型不设计

用Mockplus教你使用属性面板的设置交互状态

使用Mockplus软件有段时间了,期间有很多使用者问我组件的设置交互状态怎么用(当然有很多人看了都会用),我就有想把怎样使用设置交互状态的方法记录下来,供初学...

2695
来自专栏极乐技术社区

一斤代码深入理解系列(二):微信小程序样式机制

之前,我已经介绍过在小程序开发中使用WXML来做界面布局,但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来,就需要一种为其添加样式的机...

1857
来自专栏木子墨的前端日常

到底该用img还是background-image?

在前端页面的实现过程中,我们经常会遇到这个情况:有一个盒子,盒子里面需要放一张图片。这个时候,我们既可以通过添加image标签来实现,也可以通过设置背景图的形式...

2031
来自专栏我的博客

JQuery事件处理

Jquery事件 1、  绑定事件示例代码: <a href=”#”>绑定事件</a> <div style=”display:none;”> 什么是绑定事件?...

3055
来自专栏河湾欢儿的专栏

01-工具 面板 视图

网页分为两步: 1.从设计稿中切出网页素材 比如说:按钮 logo 图片 背景等 2.编写代码,按效果图实现静态页面

921

扫码关注云+社区