微信小程序实现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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
js获取json元素数量的方法
Jan 27 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
基于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 分页原理分析,大家可以看看
2009/12/21 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python小白垃圾回收机制入门
2020/06/09 Python
Pycharm中如何关掉python console
2020/10/27 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
护理专业自荐信
2013/12/03 职场文书
代理商会议邀请函
2014/01/27 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
前台接待岗位职责
2015/02/03 职场文书
研究生简历自我评
2015/03/11 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
MySQL中一条update语句是如何执行的
2022/03/16 MySQL