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

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

相关文章

来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

3985
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2132
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3095
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4818
来自专栏落花落雨不落叶

canvas画简单电路图

59911
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2625
来自专栏杨龙飞前端

scrollto 到指定位置

2494
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5346
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6688

扫码关注云+社区