微信小程序实现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 相关文章推荐
判断ie的两种简单方法
Aug 12 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python处理excel绘制雷达图
2019/10/18 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
Python urllib3软件包的使用说明
2020/11/18 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
大学生个人推荐信范文
2013/11/25 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
学生会主席事迹材料
2014/01/28 职场文书
高中生评语大全
2014/04/25 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
博士导师推荐信
2015/03/25 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
python百行代码实现汉服圈图片爬取
2021/11/23 Python
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL