微信小程序实现image组件图片自适应宽度比例显示的方法


Posted in Javascript onJanuary 16, 2018

本文实例讲述了微信小程序实现image组件图片自适应宽度比例显示的方法。分享给大家供大家参考,具体如下:

一. 了解image组件

微信小程序实现image组件图片自适应宽度比例显示的方法

由于image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了。下面就来一起解决下

二. 方法

(一).使用mode:widthFix

widthFix:宽度不变,高度自动变化,保持原图宽高比不变。
首先我们先设置image的mode为widthFix,然后给图片加一个固定rpx的宽度,比如:730rpx。

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

(二).使用bindload绑定函数动态自适应。

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

然后计算他们的宽高比率。。然后设置一个宽度大小(rpx),最后通过style动态设置image的宽高。代码如下:

1. 编写页面结构index.wxml:

<image src="../uploads/2.jpg" bindload="imageLoad"
style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>

2. 设置数据index.js

//获取应用实例
var app = getApp()
Page({
  data: {
    screenWidth: 0,
    screenHeight:0,
    imgwidth:0,
    imgheight:0,
  },
  onLoad: function() {
    var _this = this;
    wx.getSystemInfo({
      success: function(res) {
        _this.setData({
          screenHeight: res.windowHeight,
          screenWidth: res.windowWidth,
        });
      }
    });
  },
  imageLoad: function(e) {
    var _this=this;
    var $width=e.detail.width,  //获取图片真实宽度
      $height=e.detail.height,
      ratio=$width/$height;  //图片的真实宽高比例
    var viewWidth=500,      //设置图片显示宽度,
      viewHeight=500/ratio;  //计算的高度值
    this.setData({
      imgwidth:viewWidth,
      imgheight:viewHeight
    })
  }
})

微信小程序实现image组件图片自适应宽度比例显示的方法

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
用javascript自动显示最后更新时间
Mar 15 Javascript
JavaScript 无符号右移赋值操作
Apr 17 Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 #Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 #Javascript
微信小程序实现流程进度的图样式功能
Jan 16 #Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 #Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 #Javascript
详解layui中的树形关于取值传值问题
Jan 16 #Javascript
基于JavaScript实现抽奖系统
Jan 16 #Javascript
You might like
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
vue组件学习教程
2017/09/09 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python面向对象特殊成员
2017/04/24 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
python定义类的简单用法
2020/07/24 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
车间操作工岗位职责
2013/12/19 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
西安兵马俑导游词
2015/02/02 职场文书
学籍证明模板
2015/06/18 职场文书
工作简报怎么写
2015/07/21 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
亲情作文之母爱
2019/09/25 职场文书