介绍 & lt; block 天气:为=皗{list_1}},,天气:关键=皗{指数}}“比;
& lt;才能view 类=皌op_img",在
,,,,,& lt; image ,
,,,,,src=https://www.yisu.com/zixun/{{item.url}}”
bindload=" imageLoad "
我="{{指数}}"/>
页面({
数据:{才能
,,,list_1:, [{, url: & # 39; . ./. ./img/1. jpg # 39;,},, {, url: & # 39; . ./. ./img/2. jpg # 39;,},, {, url: & # 39; . ./. ./img/3. jpg # 39;,},, {, url: & # 39; . ./. ./img/4. jpg # 39;,}),
,,,imgmsg: {}
,,}
}) //显示图片自适应
,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 =,,
,,viewW =, null,//容器宽度
,,viewH =,零;//容器高度
query.select才能(& # 39;.top_img& # 39;) .boundingClientRect(函数(res), {
,,viewW =, res.width;,
,,viewH =, res.height;
,,//由于图片的大小不一定,可能宽高都会超出整个图片容器,因此这里多用了图片本身的宽高进行的判断
,,if (imgw 祝辞,imgh | |, imgw 祝辞,viewW),{,//当图片自身的宽大于图片自身的高,将图片的宽等于容器的宽,去计算图片的高
,,,imgw =, viewW;
,,,imgh =, imgw /,比;
,,},else if (imgw & lt;, imgh | |, imgh 祝辞,viewH),{,//当图片自身的宽小于图片自身的高,将图片的高等于容器的高,去计算容器的宽
,,,imgw =, viewH *,比;
,,,imgh =, viewH;
,,}
,,//把图片计算后的宽高属性根据下标存入到对象中,并使地板用数学的方法取整
,,形象(指数),=,{
,,,宽度:,Math.floor (imgw),
,,,身高:,Math.floor (imgh)
,,}
,,//更新视图
,,that.setData ({
,,,imgmsg:形象
,,})
})才能
query.exec才能()
},
本篇文章给大家分享的是有关怎么在微信小程序中实现图片自适应,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
1,首先我们在页面上进行布的局,只需要给图片标签的视图容器添加宽高即可,并使用天气:对于进行遍历渲染,通过自定义属性我传入索引值,容器我同时也加入了动态属性,就是为了计算后图片不会超出整个容器的大小导致布局的错乱
2,在js中定义模拟数据,并定义形象属性空对象,用该对象通过关键值放入相对应下标的图片宽高属性
3,添加imageLoad方法去进行图片大小的计算,这里我们可以通过wx.createSelectorQuery()方法去获取图片容器的宽高,通过事件对象可以获取图片原始宽高,具体方法如下
以上就是怎么在微信小程序中实现图片自适应,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
