微信小程序动态设置图片大小的方法

我们都知道微信小程序的组件image是用来显示图片的，它有一下几个属性：

1、src              图片资源地址

2、mode          图片裁剪、缩放的模式

3、binderror     当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong'}

4、bindload     当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

但是image有默认的固定的宽度和高度，这样我们在做图片自适应的时候，就不好做了，特别是我们在做一些商品详情页的时候，需要image自适应屏幕,按原图比例显示。那么如何让image自适应比例显示呢？可以有两种方法：

一、使用mode：widthFix

widthFix：宽度不变，高度自动变化，保持原图宽高比不变。

首先我们先设置image的mode为widthFix，然后给图片加一个固定rpx的宽度，比如：730rpx。

这样图片也可以自适应了。。因为小程序的rpx本身就是一个自适应显示的单位

二、使用bindload绑定函数动态自适应。

我们可以给image绑定一个函数，这个函数，如上面的bindload说明一样，我们可以获取到原图的宽度和高度。

然后计算他们的宽高比率。。然后设置一个宽度大小（rpx），最后通过style动态设置image的宽高。代码如下：

html代码：

<image src="{{ item }}" bindload="imageLoad" data-index="{{ index }}"
style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>

js代码：

Page({
 data: {
  images:{}
 },
 imageLoad: function(e) {
   var $width=e.detail.width,  //获取图片真实宽度
     $height=e.detail.height,
     ratio=$width/$height;  //图片的真实宽高比例
   var viewWidth=718,      //设置图片显示宽度，左右留有16rpx边距
     viewHeight=718/ratio;  //计算的高度值
   var image=this.data.images;
   //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
   image[e.target.dataset.index]={
     width:viewWidth,
     height:viewHeight
   }
   this.setData({
      images:image
   })
 }
})

最后，我们就可以可以通过images[index].width 和 images[index].height给每一个图片设置宽高了。

效果如下图所示：

总结

以上所述是小编给大家介绍的微信小程序动态设置图片大小的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 微信小程序上传图片并等比列压缩到指定大小的实例代码

    微信小程序官方API中 wx.chooseImage() 是可以进行图片压缩的,可惜的是不能压缩到指定大小. 实际开发中需求可能是压缩到指定大小: 原生js可以使用canvas来压缩,但由于微信小程序对canvas有封装,使得利用canvas来压缩图片有了一些区别: 代码放在了git:https://github.com/jonyellow/code-diary/tree/master/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87%E5%8E%8B

  • Python实现比较扑克牌大小程序代码示例

    是Udacity课程的第一个项目. 先从宏观把握一下思路,目的是做一个比较德州扑克大小的问题 首先,先抽象出一个处理的函数,它根据返回值的大小给出结果. 之后我们在定义如何比较两个或者多个手牌的大小,为方便比较大小,我们先对5张牌进行预处理,将其按照降序排序,如下: def card_ranks(hand): ranks = ['--23456789TJQKA'.INDEX(r) for r, s in hand] ranks.sort(reverse=True) return ranks 然后

  • 微信小程序实现通过双向滑动缩放图片大小的方法

    本文实例讲述了微信小程序实现通过双向滑动缩放图片大小的方法.分享给大家供大家参考,具体如下: 在做小程序开发的过程中,后端传来一张图片地图,需要实现双手指滑动,使图片缩放,最终得出了一下代码: js : Page({ data: { touch: { distance: 0, scale: 1, baseWidth: null, baseHeight: null, scaleWidth: null, scaleHeight: null } }, touchStartHandle(e) { //

  • 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

    微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改文字大小功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="font-size:{{fontSize}}pt">我是view标签</view> <button class="btn" type="default" bindtap="magnifyFontS

  • 微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb

    微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb

    发现问题 重新启动微信小程序编辑器的时候遇到了这样的一个问题: tabBar.list[3].selectedIconPath 大小超过 40kb 微信小程序开发的过程之中总会出现这样或者那样的错误,需要我们耐心的去寻找,仔细查看和百度查询之后,发现了原因:其中有一张图片,替换的时候没有注意图片大小,导致项目无法预览. 解决方法 参考了一下微信小程序的官方API,查看tabBar list定义说明:也就是说选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,而我新

  • 微信小程序动态设置图片大小的方法

    我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性: 1.src              图片资源地址 2.mode          图片裁剪.缩放的模式 3.binderror     当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 4.bindload     当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height

  • 微信小程序实现裁剪图片大小

    微信小程序实现裁剪图片大小

    本文实例为大家分享了微信小程序实现裁剪图片大小的具体代码,供大家参考,具体内容如下 效果图 .wxml <button bindtap="uploadtap">上传图片</button> <image style="width: 100%;" mode="widthFix" src="{{canfile_image}}"></image> <canvas canvas-id

  • 微信小程序动态生成二维码的实现代码

    微信小程序动态生成二维码的实现代码

    效果图如下: 实现 wxml <!-- 存放二维码的图片--> <view class='container'> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image> </view> <!-- 画布,用来画二维码,只用来站位,不用来显示--> <view class=&qu

  • 微信小程序内拖动图片实现移动、放大、旋转的方法

    屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法 微信小程序这里提供了两个API wx.createContext() 创建并返回绘图上下文context对象 getActions 获取当前context上存储的绘图动作,对应wx.drawCanvas(object)中的actions clearActions 清空当前的存储绘图动作 wx.dra

  • 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现

    一.前言 项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个比较通用,颜色,大小都可以自己定义.当然了,来的最快的其实是用图片代替. 二.微信小程序中评分功能实现 1.css文件中引入字体文件.也可以点此下载字体文件 @font-face { font-family: 'FontAwesome'; src: url('https://netdna.boots

  • 微信小程序如何设置基本的页面样式，做出用户界面UI

    目录 一.总体样式 二.Flex 布局 三.WeUI 四.加入图片 五.图片轮播 一.总体样式 微信小程序允许在顶层放置一个app.wxss文件,里面采用 CSS 语法设置页面样式.这个文件的设置,对所有页面都有效. 注意,小程序虽然使用 CSS 样式,但是样式文件的后缀名一律要写成.wxss. 打开上一篇教程的示例,在项目顶层新建一个app.wxss文件,内容如下. page { background-color: pink; } text { font-size: 24pt; color:

  • 微信小程序 chooseImage选择图片或者拍照

    微信小程序 chooseImage选择图片或者拍照 一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({ data:{ src:"../image/pic4.jpg" }, gotoShow: function(){var _this = this wx.chooseImage({ count: 9, // 最多可以选择的图片张数,默认9 sizeType: ['original'

  • 微信小程序之裁剪图片成圆形的实现代码

    前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主要思路就是使用canvas绘图,把剪裁的图片绘制成圆形,另外剪裁图片的窗口还可以移动放大缩小,这个功能就用了微信组件movable-view,好了,该说的也说完了,下面咱们开始撸代码. movable-view组件 可移动的视图容器,在页面中可以拖拽滑动 会有好多个属性,在这里不一一介绍,只说我们能

  • 微信小程序 动态传参实例详解

    微信小程序 动态传参实例详解

    微信小程序 动态传参实例详解 在微信小程序的开发过程中经常会用到动态传参,比如根据某一页面传参的不同,加载不同的新的页面.接下来介绍下如何实现. 上一篇博客中介绍了如何用wx:for循环显示数组,一般情况下我们要实现的功能是点击不同的元素进入不同的页面,比如在另一个页面加载某个元素的详细信息. 跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去: index.wxml(根据点击页面的不同传递参数) <view class="item" wx:for=

  • 微信小程序动态增加按钮组件

    微信小程序动态增加按钮组件

    这里的微信小程序动态加载是以按钮为例,主页面点击不同的按钮进入不同的子页面中,根据主页面的title来动态加载子页面按钮的数量以及值. 效果图: wxml文件(注意wx:key="item"要写,不然它会有警告): <!--pages/plan/plans/plans.wxml--> <view class="className" style="background-color: rgb(225, 218, 211); height:{{

随机推荐