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


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 相关文章推荐
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 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
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
python 获取et和excel的版本号
2009/04/09 Python
python中的装饰器详解
2015/04/13 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
python操作列表的函数使用代码详解
2017/12/28 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Python的高阶函数用法实例分析
2019/04/11 Python
Django数据库操作之save与update的使用
2020/04/01 Python
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
自荐书模板
2013/12/19 职场文书
酒店led欢迎词
2014/01/09 职场文书
趣味运动会策划方案
2014/06/02 职场文书
单位病假条范文
2015/08/17 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
windows系统搭建WEB服务器详细教程
2022/08/05 Servers