微信小程序图片自适应支持多图实例详解


Posted in Javascript onJune 21, 2017

微信小程序图片自适应支持多图实例详解

微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应。

首先我们来看看图片组件给的一些说明:

属性名 类型 默认值 说明
src String 图片资源地址
mode String 'scaleToFill' 图片裁剪、缩放的模式
binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'}
bindload HandleEvent 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

注:image组件默认宽度300px、高度225px

mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。

模式 说明
scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix 宽度不变,高度自动变化,保持原图宽高比不变

如果说要有一种比较合适的方案,大概是widthFix,然而上面这些模式中,所要求的前提是需要给图片标签设定一个宽度值或者一个高度值。但有时候我们根本不想限定图片的宽高,我们需要的是图片自身能够根据自身的大小来适配。

而widthFix模式就要求你必须先设定一个宽度值,如果出来的图片比给定的width小呢?此时图片则会发生拉伸的现象。(常见应用在文章中,因为文章中的插图有可能比默认的宽小,比如常见的表情)。

其实上面的标签中,图片为我们预留了一个函数bindLoad。下面看看我是怎么支持自适应的。

有一个前提,就是多图的时候,你需要知道这个图片是处于所有中的位置index,我们通过这个位置来保存图片的宽度和高度。

<image src="http://ww4.sinaimg.cn/bmiddle/006q8Q6bjw1fbwucs1cctj30t80t8myh.jpg" 
bindLoad="imageLoad" style="width:{{imageSize[0].width}}rpx; height:{{imageSize[0].height}}
rpx" data-index="0" mode="scaleToFill"/>
<image src="http://ww4.sinaimg.cn/bmiddle/006q8Q6bjw1fbwucs1cctj30t80t8myh.jpg"
 bindLoad="imageLoad" style="width:{{imageSize[1].width}}rpx; height:{{imageSize[1].height}}rpx" 
data-index="1" mode="scaleToFill"/>
var px2rpx = 2, windowWidth=375;
page({
  data:{
    imageSize:{}
  },
  onLoad:function(options){
    wx.getSystemInfo({
     success: function(res) {
      windowWidth = res.windowWidth;
      px2rpx = 750 / windowWidth;
     }
    })
  },
  imageLoad:function(e){
    //单位rpx
    var originWidth = e.detail.width*px2rpx, 
    originHeight = e.detail.height*px2rpx,
    ratio = originWidth/originHeight;
    var viewWidth = 710,viewHeight//设定一个初始宽度
    //当它的宽度大于初始宽度时,实际效果跟mode=widthFix一致
    if(originWidth>= viewWidth){
      //宽度等于viewWidth,只需要求出高度就能实现自适应
      viewHeight = viewWidth/ratio;
    }else{
      //如果宽度小于初始值,这时就不要缩放了
      viewWidth = originWidth;
      viewHeight = originHeight;
    }
    var imageSize = this.data.imageSize;
    imageSize[e.target.dataset.index] = {
      width:viewWidth,
      height:viewHeight
    }
    this.setData({
      imageSize:imageSize
    })
  }
})

如果我们的图片中不仅限定了宽度,还限定了高度值,比如我们限定max-height之类的。那我们的imageLoad函数则要调整为根据他们的宽高比来输出。

imageLoad:function(e){
  var originWidth = e.detail.width * px2rpx,
  originHeight=e.detail.height *px2rpx,
  ratio = originWidth/originHeight ;
  var viewWidth = 220,viewHeight = 165, viewRatio = viewWidth/viewHeight;
  if(ratio>=viewRatio){
    if(originWidth>=viewWidth){
      viewHeight = viewWidth/ratio;
    }else{
      viewWidth = originWidth;
      viewHeight = originHeight
    }
  }else{
    if(originWidth>=viewWidth){
      viewWidth = viewRatio*originHeight
    }else{
      viewWidth = viewRatio*originWidth;
      viewHeight = viewRatio*originHeight;
    }
  }
  var image = this.data.imageSize;
  image[e.target.dataset.index]={
    width:viewWidth,
    height:viewHeight
  }
  this.setData({
  imageSize:image
})
},

附录:小图预览,进入全屏模式。

用预览图片的API,wx.previewImage(OBJECT)以下是对应的代码,样式部分,自行布局。

HTML代码:

<view class="wrap">
 <image wx:for="{{pictures}}" wx:key="unique" src="{{item}}" data-index="{{index}}" bindtap="previewImage"></image>
</view>

JS

Page({
 data: {
  pictures: [
   'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',
   'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',
   'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg',
   'https://p1.meituan.net/movie/45f98822bd15082ae3932b6108b17a01265779.jpg',
   'https://p1.meituan.net/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg',
   'https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg',
   'https://p1.meituan.net/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg',
   'https://p1.meituan.net/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg'
  ]
 },
 previewImage: function(e){
  var that = this,
    index = e.currentTarget.dataset.index,
    pictures = this.data.pictures;
  wx.previewImage({
   current: pictures[index],
   urls: pictures
  })
 }
})

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
IE与FireFox中的childNodes区别
Oct 20 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
Django使用多数据库的方法
Sep 06 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
vue 获取url里参数的两种方法小结
Nov 12 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 #Javascript
详解webpack分离css单独打包
Jun 21 #Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 #Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 #Javascript
基于jquery日历价格、库存等设置插件
Jul 05 #jQuery
详解Angular 自定义结构指令
Jun 21 #Javascript
详解Angular2 之 结构型指令
Jun 21 #Javascript
You might like
php 购物车完整实现代码
2014/06/05 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
pyqt5自定义信号实例解析
2018/01/31 Python
Django中的ajax请求
2018/10/19 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
如何使用python代码操作git代码
2020/02/29 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
用Python制作音乐海报
2021/01/26 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
班主任工作年限证明
2014/01/12 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
详解MySQL连接挂死的原因
2021/05/18 MySQL
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技