目录

zzzzchen 的个人博客

记录精彩的程序人生

X

uni-app watch监听事件使用说明

一、位置

watch监听事件和data、onLoad、onShow等同级

二、具体语法

		watch: {
			addOrUpdateSceneDeviceComplete: {
				handler: function() {
					if(this.addOrUpdateSceneDeviceComplete == 2){
						uni.showLoading({
							title: '处理中...'
						})
					}
					if(this.addOrUpdateSceneDeviceComplete == 1){
						uni.hideLoading();
						uni.showToast({
							title: '添加成功',
							icon: 'none',
							duration: 500
						});
						setTimeout(() => {
							// 你要执行的函数
							uni.navigateBack();
						}, 1000);
					}
				},
				deep: true,
				immediate: true
			}
		},

三、参数说明

addOrUpdateSceneDeviceComplete:自定义的变量名称,由于我监听的是一个变量,所以这里也需使用变量名称。

handler:当监听到的变量发生变化时,会执行handler函数。

deep:进行深度监听。

immediate:如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

四、举例

我的业务是一个批量添加的操作,过程可能会耗时,所以需要做一个等待操作完成的功能。

所以我写了个变量,初始值为0,当业务逻辑开始时,将变量设置为2,操作完成后,变量设置为1。

这样就可以在监听的时候判断变量如果是2,那么执行加载中或处理中的提示,而操作完成后变量为1时,就停止loading,提示操作成功等操作。


标题:uni-app watch监听事件使用说明
作者:zzzzchen
地址:https://dczzs.com/articles/2021/05/26/1621999025845.html