微信小程序监听 watch方法
微信小程序监听 watch方法
使用过vue框架的应该使用过watch监听变量
那么 在微信小程序中 怎么使用watch
首先我们需要引入一个watch.js文件到我们的全局中
// 监听页面数据变化function initWatch(_page) {if (!_page) {console.error('未检测到Page对象,请将当前page传入该函数');return false;}if (!_page.watch) { //判断是否有需要监听的字段console.error('未检测到Page.watch字段(如果不需要监听,请移除initWatch的调用片段)');return false;}let _dataKey = Object.keys(_page.data);Object.keys(_page.watch).map((_key) => { //遍历需要监听的字段_page.data['__' + _key] = _page.data[_key]; //存储监听的数据if (_dataKey.includes(_key)) { //如果该字段存在于Page.data中,说明合法Object.defineProperties(_page.data, {[_key]: { //被监听的字段enumerable: true,configurable: true,set: function (value) {let oldVal = this['__' + _key];if (value !== oldVal) { //如果新设置的值与原值不等,则触发监听函数setTimeout(function () { //为了同步,否则如果回调函数中有获取该字段值数据时将不同步,获取到的是旧值_page.watch[_key].call(_page, oldVal, value); //设置监听函数的上下文对象为当前的Page对象并执行}.bind(this), 0)}this['__' + _key] = value;},get: function () {return this['__' + _key]}}})} else {console.error('监听的属性[' + _key + ']在Page.data中未找到,请检查~')}})}module.exports = {initWatch: initWatch}
引入到我们全局app.js中
然后下面挂在一下
当我们准备好之后
下面就开始运用到我们页面上
const app = getApp()
app.util.initWatch(this)
watch: { //需要监听的字段'complete': function (oldValue, newValue) {console.log('监听数据-complete', oldValue, newValue)},},
使用效果
监听函数返回第一个数是老值,第二个数是新值
微信小程序监听 watch方法相关推荐
- 微信小程序 监听位置信息
wx.onLocationChange(function callback) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram ...
- 微信小程序监听服务器发送消息,微信小程序实时聊天WebSocket
本文实例为大家分享了微信小程序实时聊天WebSocket的具体代码,供大家参考,具体内容如下 1.所有监听事件先在onload监听. // pages/index/to_news/to_news.js ...
- 微信小程序--监听对象属性变化
本以为小程序会跟vue差不多有像watch一类的方法,好吧并没有.百度了很多,看了很多大神写的案例.奈何天资不太行,虽然效果有了,但还是不太懂. app.js //监听属性值函数watch:funct ...
- 微信小程序监听app.js中的globalData属性,
// app.js中 //app.js App({onLaunch: function () {let that = this// 在这里用定时器模拟网络请求的过程setTimeout(functio ...
- 微信小程序监听实时地理位置变化事件接口申请
监听实时地理位置变化事件,需结合 wx.startLocationUpdateBackground.wx.startLocationUpdate使用. 申请开通 暂只针对国内主体如下类目的小程序开放, ...
- 微信小程序-监听屏幕滚动
一.效果: 功能描述:监听屏幕滚动,实现向下滚动时搜索框和分类选项置顶,向上滚动页面恢复原样. 二.实现: 运用页面Page()函数中的onPageScroll方法,来监听屏幕滚动的距离. 1).js ...
- 微信小程序 监听手势滑动切换页面
1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bin ...
- 微信小程序监听屏幕上滑下滑事件
需求是在list页中带有搜索框,下滑时隐藏顶部输入框,上滑时显示输入框,提高一点点用户体验.避免想要搜索就必须上滑至顶部.. 实现: 首先输入框得固定在顶部. wxml:class="sea ...
- 微信小程序 —— 监听网络状态
在app.js的onLaunch wx.onNetworkStatusChange((res) => {if(!res.isConnected){console.log(res.isConnec ...
最新文章
- 【PHPMailer】写一封邮件
- 转 机器学习系列 08:深入理解拉格朗日乘子法、KKT 条件和拉格朗日对偶性
- 2020-07-07 内模原理(The Internal Mode Principle)
- 非mapreduce生成Hfile,然后导入hbase当中
- 近100个Spring/SpringBoot常用注解汇总!
- python常用算法包_Python中常用的包--sklearn
- html出现滚动条页面闪动,CSS3 calc实现滚动条出现页面不跳动闪动
- docker的文件流处理_迁移到微服务与DevOps,微服务和Docker容器的全面实用指南
- python判断是否含有0_Python:判断文本中的用户名在数据库中是否存在,存在返回1,不存在返回0...
- 用计算机弹让我做你的眼睛,童珺 - 让我做你的眼睛 (改编版)-酷歌词...
- 传奇源码分析-服务器端
- 批量下载CMIP6数据
- 英语中容易混淆的单词发音: 一
- 云服务器可以用来做什么
- react,tsx中使用微信jssdk分享总结
- Linux 简要大纲
- 怎么删除github项目/仓库中已经上传的代码
- [STC系列单片机/51单片机]软件延时计算方法详解
- 如何redis关闭保护模式,取消密码登录
- 汤道生任腾讯云与智慧CEO;阿里巴巴副总裁范驰离职 | 高管变动2021年5月10日-16日...