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


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 相关文章推荐
JQuery弹出层示例可自定义
May 19 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
微信小程序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
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
Python性能优化技巧
2015/03/09 Python
python flask安装和命令详解
2019/04/02 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python生成随机红包的实例写法
2019/09/02 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Django如何重置migration的几种情景
2021/02/24 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
EntityManager都有哪些方法
2013/11/01 面试题
会计自荐信范文
2014/03/09 职场文书
婚前协议书
2014/04/15 职场文书
环境保护建议书
2014/08/26 职场文书
2015入党个人自传范文
2015/06/26 职场文书
小学同学聚会感言
2015/07/30 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书