<微信小程序image图片加载完成监听
您的当前位置:首页正文

微信小程序image图片加载完成监听

2023-12-06 来源:六三科技网

需求

在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调。

实现

1. 绑定回调

通过image标签的bindload属性绑定图片加载完成回调函数,src根据图片加载是否完成绑定是否显示缺省图:

<image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad"/>

2. 回调监听

在js文件中定一个imageLoad函数,我们就可以通过参数拿到图片加载完成宽高信息:

imgOnLoad(ev) { let src = ev.currentTarget.dataset.src, width = ev.detail.width, height = ev.detail.height }

3. 缩放图片

我们写一个工具类,然后调用imageUtil方法对原始图片根据屏幕宽高进行等比例缩放。

function imageUtil(e) { var imageSize = {}; var originalWidth = e.detail.width;//图片原始宽 var originalHeight = e.detail.height;//图片原始高 var originalScale = originalHeight / originalWidth;//图片高宽比 console.log('originalWidth: ' + originalWidth) console.log('originalHeight: ' + originalHeight) imageSize.imageWidth = originalWidth; imageSize.imageHeight = originalHeight; //获取屏幕宽高 wx.getSystemInfo({ success: function (res) { var windowWidth = res.windowWidth; var windowHeight = res.windowHeight; var windowscale = windowHeight / windowWidth;//屏幕高宽比 if (originalScale < windowscale) {//图片高宽比小于屏幕高宽比 //图片缩放后的宽为屏幕宽 imageSize.imageWidth = windowWidth; imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth; } else {//图片高宽比大于屏幕高宽比 //图片缩放后的高为屏幕高 imageSize.imageHeight = windowHeight; imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight; } imageSize.imageWidth = windowWidth; imageSize.imageHeight = windowHeight; } }) console.log('缩放后的宽: ' + imageSize.imageWidth) console.log('缩放后的高: ' + imageSize.imageHeight) return imageSize;}

4. 修改image宽高

通过imageUtil获取到目标宽高后,this.setData({width:imageUtil(e).width, height:imageUtil(e).height}) 即可以动态修改图片宽高了(e是imageLoad方法中的参数):

<image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad" style='width:width;height:height'/>

小编还为您整理了以下内容,可能对您也有帮助:

微信小程序数据监听

iOS数据监听很简单,比如登录成功之后首页、个人中心页等很多页面都需要更新数据,只需要首页和个人中心页注册通知,登录成功之后发送通知,首页和个人中心页就能接收到该通知,此时就可以更新数据及界面,退出登录同理。

小程序更新页面数据就比较费劲,之前我都是获取上级页面,然后调用上级页面自定义方法 loadNewData 方法来刷新上级页面数据。

这种方法说实话也挺好用的,但是只能更新 wx.navigateTo 打开的页面。

官方也有页面间通信方法 EventChannel ,同样只能和 wx.navigateTo 打开的页面进行通信。

今天遇到的需求是 tabbar 切换的页面更新首页列表数据,只能各种百度,最终也实现的功能。

在首页调用

在其他页面修改 reloadIndex 的值

小程序组件有 数据 ,也实现了某个功能。

参考文章:

小程序实现数据监听

小程序如何在其他页面监听globalData中值的变化?

微信小程序设置简单的

微信小程序长按识别二维码的功能是如何实现的?

微信小程序长按识别二维码的功能是通过小程序原生组件和API实现的。具体实现步骤如下:

1. 使用image和canvas组件,在image组件上监听longpress事件。

2. 触发事件后,使用wx.showActionSheet显示菜单。

3. 点击菜单后,获取canvas的node,获取context,然后通过wx.canvasGetImageData得到图像数据,然后通过upng解析。

4. 将解析结果显示在页面上。

在微信小程序中如何实现image组件图片自适应显示

这篇文章主要介绍了微信小程序实现image组件图片自适应宽度比例显示的方法,简单讲述了image组件的常用属性,并结合实例形式分析了微信小程序实现图片自适应宽度比例的相关操作技巧,需要的朋友可以参考下

本文实例讲述了微信小程序实现image组件图片自适应宽度比例显示的方法。分享给大家供大家参考,具体如下:

一. 了解image组件

由于image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了。下面就来一起解决下

二. 方法

(一).使用mode:widthFix

widthFix:宽度不变,高度自动变化,保持原图宽高比不变。

首先我们先设置image的mode为widthFix,然后给图片加一个固定rpx的宽度,比如:730rpx。

这样图片也可以自适应了。因为小程序的rpx本身就是一个自适应显示的单位

(二).使用bindload绑定函数动态自适应。

我们可以给image绑定一个函数,这个函数,如上面的bindload说明一样,我们可以获取到原图的宽度和高度。

然后计算他们的宽高比率。然后设置一个宽度大小(rpx),最后通过style动态设置image的宽高。代码如下:

1. 编写页面结构index.wxml:

<image src="../uploads/2.jpg" bindload="imageLoad"

style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>2. 设置数据index.js

//获取应用实例

var app = getApp()

Page({

data: {

screenWidth: 0,

screenHeight:0,

imgwidth:0,

imgheight:0,

},

onLoad: function() {

var _this = this;

wx.getSystemInfo({

success: function(res) {

_this.setData({

screenHeight: res.windowHeight,

screenWidth: res.windowWidth,

});

}

});

},

imageLoad: function(e) {

var _this=this;

var $width=e.detail.width, //获取图片真实宽度

$height=e.detail.height,

ratio=$width/$height; //图片的真实宽高比例

var viewWidth=500, //设置图片显示宽度,

viewHeight=500/ratio; //计算的高度值

this.setData({

imgwidth:viewWidth,

imgheight:viewHeight

})

}

})

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue中将对象新增的属性添加到检测序列的方法有哪些?

在jQuery中实现碰到边缘反弹的动画效果该如何做?

在vue cli webpack中如何使用sass(详细教程)

在jQuery中如何改变P标签文本值

在jQuery中实现标签子元素的添加和赋值方法

通过在js动态中创建标签,并设置属性方法(详细教程)

微信小程序生命周期(onLoad,onHide,onShow,onReady,onUnload)

周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。下面从一下三个方面介绍微信 小程序 的生命周期:

应用生命周期

页面生命周期

应用生命周期影响页面生命周期

应用生命周期

1、用户首次打开小程序,触发 onLaunch(全局只触发一次)。

2、小程序初始化完成后,触发onShow方法,监听小程序显示。

3、小程序从前台进入后台,触发 onHide方法。

4、小程序从后台进入前台显示,触发 onShow方法。

5、小程序后台运行一定时间,或系统资源占用过高,会被销毁。

前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。需要注意的是:只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

页面生命周期

1、小程序注册完成后,加载页面,触发onLoad方法,一个页面只会调用一次。

2、页面载入后触发onShow方法,显示页面,每次打开页面都会调用一次。

3、首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。

4、当小程序后台运行或跳转到其他页面时,触发onHide方法。

5、当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。

6、当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload

wx.navigateTo跳转状态下,页面A和页面B的生命周期逻辑

1、进入A页面:A执行onLoad()-->onShow()-->onReady();

2、A页面navigateTo B页面:A执行onHide(),B执行onLoad()-->onShow()-->onReady();

3、B页面返回A页面:B执行onUnload(),A执行onShow();

4、退出A页面:A执行onUnload()。

应用生命周期影响页面生命周期

1、小程序初始化完成后,页面首次加载触发onLoad,只会触发一次。

2、当小程序进入到后台,先执行页面onHide方法再执行应用onHide方法。

3、当小程序从后台进入到前台,先执行应用onShow方法再执行页面onShow方法。

六三科技网还为您提供以下相关内容希望对您有帮助:

微信小程序数据监听

iOS数据监听很简单,比如登录成功之后首页、个人中心页等很多页面都需要更新数据,只需要首页和个人中心页注册通知,登录成功之后发送通知,首页和个人中心页就能接收到该通知,此时就可以更新数据及界面,退出登录同理。小程序更...

微信小程序长按识别二维码的功能是如何实现的?

微信小程序长按识别二维码的功能是通过小程序原生组件和API实现的。具体实现步骤如下:1. 使用image和canvas组件,在image组件上监听longpress事件。2. 触发事件后,使用wx.showActionSheet显示菜单。3. 点击菜单后,获取canvas的...

微信小程序 本地背景图片设置

1、背景图片设置可以用服务器上的图片。2、也可以将本地图片转成base64的。wxml:&lt;view class="topview-left" style="background-image: url({{background}});mode='scaleToFill'"/&gt; js:data: {     b...

记录在微信小程序 组件中使用监听observers

我这里在组件中使用observers解决的 另外,不是组件,表单页面上直接使用picker组件也有这个问题,从后台拿到数据,即时使用了setData修改picker 的index,数据也没有展示出来,我的解决方式:对原生微信小程序不是很熟,仅供参考 ...

微信小程序怎么判断服务器下文件夹中的图片存在

1、首先用手机将小程序发到电脑端。如下图所示。2、接着在电脑中,进入Fiddler软件,如下图所示。3、然后在打开的软件页面中,点击File下面的第一个选项。4、左下角显示capture就代表监测中,点击小程序捕获图片的请求。5...

在微信小程序中如何实现image组件图片自适应显示

首先我们先设置image的mode为widthFix,然后给图片加一个固定rpx的宽度,比如:730rpx。这样图片也可以自适应了。因为小程序的rpx本身就是一个自适应显示的单位(二).使用bindload绑定函数动态自适应。我们可以给image绑定一个...

微信小程序生命周期(onLoad,onHide,onShow,onReady,onUnload)

1、用户首次打开小程序,触发 onLaunch(全局只触发一次)。2、小程序初始化完成后,触发onShow方法,监听小程序显示。3、小程序从前台进入后台,触发 onHide方法。4、小程序从后台进入前台显示,触发 onShow方法。5、小程序...

2020-07-31 微信小程序数据刷新与重新加载

onShow  生命周期回调—监听页面显示 onReady  生命周期回调—监听页面初次渲染完成 onHide 生命周期回调—监听页面隐藏 onUnload  生命周期回调—监听页面卸载 1.执行某方法后数据刷新与重新加载   &amp;...

从微信小程序保存的照片,在图库中,显示加载中但是显示无效文件_百度...

1、点击登录微信APP,在“微信”页面中点击聊天界面要保存的图片。2、然后长按住要保存的图片,在弹出选择中点击“保存图片”选项。3、然后在图片保存成功后,系统会提示“图片已经保存至”tencent,MicroMsg,WeiXin文件夹。

微信小程序如何动态获取登入图像

1、首先是打开微信小程序,点击登录。2、其次点击我的,点击更多信息后,可以获取微信头像和微信昵称。3、最后保存头像图片即可。

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top