微信小程序图片自适应实现解析


Posted in Javascript onJanuary 21, 2020

这篇文章主要介绍了微信小程序图片自适应实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

关于微信小程序图片自适应的做法

在日常业务场景中,很多地方都需要图片进行列表的显示,但是这样就存在一个问题,由于每张上传的图片规格并不是一样的,就会发生图片要么过大,要么过小,或者被拉伸的情况,如下图

微信小程序图片自适应实现解析

对于这个情况,我的思路是可以使用image标签内的bindload属性进行计算,bindload属性的介绍如下

微信小程序图片自适应实现解析

下面就是具体的方法流程

1、首先我们在页面上进行布局,只需要给image标签的view容器添加宽高即可,并使用wx:for进行遍历渲染,通过自定义属性data-i传入索引值,容器我同时也加入了动态属性,就是为了计算后图片不会超出整个容器的大小导致布局的错乱

<block wx:for="{{list_1}}" wx:key="{{index}}">
  <view class="top_img" style="width:{{imgmsg?imgmsg[index].width:''}}px;height:{{imgmsg?imgmsg[index].height:''}}px">
      <image style="width:{{imgmsg[index].width}}px !important;height:{{imgmsg[index].height}}px !important;" 
      src="{{item.url}}" 
      bindload="imageLoad"
      data-i="{{index}}" />
    </view>
 </block>

2、在js中定义模拟数据,并定义image属性空对象,用该对象通过key值放入相对应下标的图片宽高属性

page({
  data:{
    list_1: [{ url: '../../img/1.jpg' }, { url: '../../img/2.jpg' }, { url: '../../img/3.jpg' }, { url: '../../img/4.jpg' }],
    imgmsg:{}
  }
})

3、添加imageLoad方法去进行图片大小的计算,这里我们可以通过wx.createSelectorQuery()方法去获取图片容器的宽高,通过事件对象可以获取图片原始宽高,具体方法如下

//显示图片自适应
 imageLoad(e) {
  //获取小程序节点属性的api
  const query = wx.createSelectorQuery()
  var imgw = e.detail.width, //图片原始宽度
   imgh = e.detail.height, //图片原始高度
   index = e.currentTarget.dataset.i, //图片下标
   ratio = imgw / imgh, //图片宽高比
   image = this.data.imgmsg, //图片宽高的索引对象
   that = this,
   viewW = null,//容器宽度
   viewH = null;//容器高度
  query.select('.top_img').boundingClientRect(function(res) {
   viewW = res.width; 
   viewH = res.height;
   //由于图片的大小不一定,可能宽高都会超出整个图片容器,因此这里多用了图片本身的宽高进行的判断
   if (imgw > imgh || imgw > viewW) { //当图片自身的宽大于图片自身的高,将图片的宽等于容器的宽,去计算图片的高
    imgw = viewW;
    imgh = imgw / ratio;
   } else if (imgw < imgh || imgh > viewH) { //当图片自身的宽小于图片自身的高,将图片的高等于容器的高,去计算容器的宽
    imgw = viewH * ratio;
    imgh = viewH;
   }
   //把图片计算后的宽高属性根据下标存入到对象中,并使用math的floor方法取整
   image[index] = {
    width: Math.floor(imgw),
    height: Math.floor(imgh)
   }
   //更新视图
   that.setData({
    imgmsg: image
   })
  })
  query.exec()
 },

好了,到这里,我们可以看下具体的结果了

微信小程序图片自适应实现解析

微信小程序图片自适应实现解析

微信小程序图片自适应实现解析

简单的列表图片自适应功能实现了,但是这个方法还能进行扩展和优化,如果有好的想法可以一起学习交流,共同提高

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js图片延迟加载的实现方法及思路
Jul 22 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 #Javascript
Vue实现兄弟组件间的联动效果
Jan 21 #Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 #Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 #Javascript
微信小程序如何实现点击图片放大功能
Jan 21 #Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 #Javascript
微信小程序全选多选效果实现代码解析
Jan 21 #Javascript
You might like
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
Jquery性能优化详解
2014/05/15 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
vue接口请求加密实例
2020/08/11 Javascript
原生js实现购物车功能
2020/09/23 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
关于numpy数组轴的使用详解
2019/12/05 Python
Python递归实现打印多重列表代码
2020/02/27 Python
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
工作证明英文模板
2014/10/21 职场文书
企业2014年度工作总结
2014/12/10 职场文书
感谢信的格式
2015/01/21 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书