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


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中的public和private对象,即static修饰符
Jan 18 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
JS数组方法reverse()用法实例分析
Jan 18 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
vue实现移动端触屏拖拽功能
Aug 21 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
解析argc argv在php中的应用
2013/06/24 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
vue 注册组件的使用详解
2018/05/05 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
Python Collatz序列实现过程解析
2019/10/12 Python
python在地图上画比例的实例详解
2020/11/13 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
省级四好少年事迹材料
2014/01/25 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
介绍信范文
2015/01/31 职场文书
欠款起诉书范文
2015/05/19 职场文书
学校运动会感想
2015/08/10 职场文书
电工生产实习心得体会
2016/01/22 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python