微信小程序实现watch监听数值改变的效果

news/2024/11/8 23:09:08/

前言

  • 需要用到Javascript中的Object.defineProperty()方法,实现劫持对象的get/set指令,从而监听到对象的赋值(调用setter),达到监听数值改变效果

示例

监听变量方法:

function watchData(pageData, key, fn) {var oldVal = pageData[key];Object.defineProperty(pageData, key, {configurable: true,enumerable: true,get: function () {return oldVal ;},set: function (newVal) {if (newVal === oldVal) return;fn && fn(newVal);oldVal = newVal;},});fn && fn(oldVal);
}

监听 scrollTop 的值的变化,根据 scrollTop 的值调整导航栏的样式:

onShow: function (option) {const that = this;this.watchData('scrollTop', val => {if (scrollTop > 200) {that.setData({navBarStyle: 'mimi'});} else {that.setData({navBarStyle: 'default'});}});
}

参考

https://blog.csdn.net/weixin_37680520/article/details/105875333
https://blog.csdn.net/Derrrrrd/article/details/124902590
https://blog.csdn.net/y13103192727/article/details/123397219


http://www.ppmy.cn/news/1255041.html

相关文章

Docker、Kubernetes、OCI、CRI-O、containerd、runc 之间的关系以及它们是如何一起工作的?

最近网上看到一张图片,能够很清晰地展现出 Docker、Kubernetes、OCI、CRI-O、containerd、runc 之间的关系以及它们是如何在一起工作的,如下: 本文可以作为之前一篇文章(《K8s、Docker、CRI、OCI 之间的爱恨情仇》)的…

Python快速实现BMI(身体质量指数)计算器(窗口界面形式)

BMI是身体质量指数(Body Mass Index)的缩写,是一种衡量人体肥胖程度的指标。它是根据人的身高和体重计算得出的,公式为: BMI 体重(kg)/ 身高^2(m) 其中,体…

【算法】直接插入排序

目录 1. 说明2. 举个例子3. java代码示例4. java示例截图 1. 说明 1.直接插入排序的方式和打牌一样,刚开始数组为空 2.拿到一个数字后从左到右将它与数组中的每一个数字进行比较,然后插入合适的位置 3.到最后,数组按照既定的顺序排序好 2. 举…

【SpringMVC】Spring Web MVC入门(一)

文章目录 前言什么是Spring Web MVC?什么是MVC什么是Spring MVC? Spring Boot 和 Spring MVC 的区别什么是Spring Boot?关系和区别 Spring MVC 学习注解介绍1. SpringBootApplication2. RestController3. RequestMapping3.1 RequestMapping 使…

javascript的Proxy

1. 什么是Proxy Proxy是ES6中新增的一个特性,它可以拦截对象的操作,提供了一个中间层来控制对目标对象的访问。简单来说,它可以对对象进行代理,从而实现对对象的监控、修改、过滤等操作。 2. 为什么出现Proxy 在JavaScript中&a…

Session 与 JWT 的对决:谁是身份验证的王者? (下)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

深入理解网络非阻塞 I/O:NIO

🔭 嗨,您好 👋 我是 vnjohn,在互联网企业担任 Java 开发,CSDN 优质创作者 📖 推荐专栏:Spring、MySQL、Nacos、Java,后续其他专栏会持续优化更新迭代 🌲文章所在专栏&…

【Matlab】如何快速入门一项新技能-以Matlab/Simulink入门为例

目录 1. 引言 2. 背景 3. 快速学习并完成开发 3.1 了解需求,知道要干什么 3.2 了解Matlab/Simulink基本功能 第一步,查看Matlab的中文网站中文网站https://www.ilovematlab.cn/resources/对Matlab/Simulink有了一个初步认识。 3.3 实现一个最简单…