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


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 相关文章推荐
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 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读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
python 计算文件的md5值实例
2017/01/13 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
django 模型中的计算字段实例
2020/05/19 Python
Python调用Redis的示例代码
2020/11/24 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
师范类求职信
2014/06/21 职场文书
党员演讲稿
2014/09/04 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
Java 超详细讲解hashCode方法
2022/04/07 Java/Android