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

前言

  • 需要用到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.mzph.cn/news/201928.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode—2477.到达首都的最少油耗【中等】

2023每日刷题&#xff08;五十&#xff09; Leetcode—2477.到达首都的最少油耗 算法思想 参考自灵茶山艾府 实现代码 class Solution { public:long long minimumFuelCost(vector<vector<int>>& roads, int seats) {int n roads.size() 1;vector<i…

js函数工具-获取某年的最后一个工作日

// 获取某年的最后一个工作日 import { endOfYear, isWeekend } from date-fns; import moment from moment;const lastWorkingDayOfYear (year) > {let date endOfYear(new Date(year, 0, 1));while (isWeekend(date)) {date new Date(date.getTime() - 24 * 60 * 60 * …

iNet Network Scanner for Mac:简洁高效的WiFi网络扫描软件

随着无线网络的普及&#xff0c;WiFi网络已经成为我们日常生活中必不可少的一部分。无线网络的稳定性和速度对我们的工作和娱乐体验至关重要。因此&#xff0c;一款功能强大、简洁高效的WiFi网络扫描软件非常重要。今天&#xff0c;我们向大家推荐一款优秀的Mac平台WiFi网络扫描…

【软件测试】技术精选:Jmeter常见的几种报错

1、Java.net.UnknownHostException 这个错的含义是 没有连接到服务器地址&#xff0c;因此很可能是 内部网络中断导致。 2、502 Bad gateway 这个和本地的线程数无关 可能原因是网络抖动不稳定导致 3、java.net.SocketException: Socket closed 强制停止线程&#xff0c;连接…

Python绘图坐标轴数字要求三位分节的处理方法

比如说1000&#xff0c;用三位分节法的写法就是1 000&#xff0c;咱们操作的时候可以先式化字符串&#xff0c;用千位分隔符表示数字就是1,000&#xff0c;再把逗号换成空格。 import matplotlib.pyplot as plt import matplotlib.ticker as ticker# 示例数据 x [1000, 2000, …

vue 过滤器 (filters) ,实际开发中的使用

在实际开发中要判断不同的状态,要写很多重复的代码, 类似这样: 这样学麻烦, 不方便维护, 这时候可以用 filters 过滤器 在页面这样写就可以了

PET(Point-Query Quadtree for Crowd Counting, Localization, and More)

PET&#xff08;Point-Query Quadtree for Crowd Counting, Localization, and More&#xff09; 介绍实验记录训练阶段推断阶段 介绍 论文&#xff1a;Point-Query Quadtree for Crowd Counting, Localization, and More 实验记录 训练阶段 TODO 推断阶段 下面是以一张输…

4.8 构建onnx结构模型-Less

前言 构建onnx方式通常有两种&#xff1a; 1、通过代码转换成onnx结构&#xff0c;比如pytorch —> onnx 2、通过onnx 自定义结点&#xff0c;图&#xff0c;生成onnx结构 本文主要是简单学习和使用两种不同onnx结构&#xff0c; 下面以 Less 结点进行分析 方式 方法一&a…

Openfire CVE-2023-32315(metasploit版)

step1&#xff1a;用docker搭建环境 Step2&#xff1a;docker查看映射端口 Step3&#xff1a;打开mysql和apache2&#xff0c;访问特定端口&#xff0c;然后靶标应用。 Step4&#xff1a;用metasploit进行攻击&#xff1a; 首先&#xff0c;打开metasploit&#xff0c;然…

Java Date LocalDate LocalDateTime

Java Date LocalDate LocalDateTime Java中常用时间类型 Date LocalDate LocalDateTime 在工作中使用很频繁&#xff0c; 但中间很多常用功能每次编写代码很繁琐&#xff0c;故而封装了以下三个工具类&#xff1a; DateUtil 日期工具类LocalDateUtil 新日期工具类LocalDateTime…

Python-条件判断(if语句详解)

条件判断 python代码执行从上到下&#xff0c;默认没有main函数 如果 否则 写法一&#xff1a;if if expression: do_something1 do_something2 ... next_something#一定会执行&#xff0c;和判断条件无关 if a > b:#执行语句1#执行语句2#执行语句3#... #执行语…

java第三十课

电商项目&#xff08;前台&#xff09;&#xff1a; 登录接口 注册接口后台&#xff1a; 注册审核&#xff1a;建一个线程类 注意程序中的一个问题。 这里是 5 条记录&#xff0c;2 条记录显示应该是 3 页&#xff0c;实际操作过程 有审核机制&#xff0c;出现了数据记录动态变…

【从删库到跑路 | MySQL数据库总结篇】JDBC编程

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【MySQL学习专栏】&#x1f388; 本专栏旨在分享学习MySQL的一点学习心得&#xff0c;欢迎大家在评论区讨论&#x1f48c; 目录 一、前言…

共建共创 | 紫光展锐-中国电信“终端测试与创新联合实验室”正式成立

近日&#xff0c;紫光展锐携手中国电信正式成立“终端测试与创新联合实验室”&#xff0c;这标志着紫光展锐在功能、协议、互操作性等测试方面的创新能力和持续发展能力获得认可&#xff0c;为进一步提升通信技术&#xff0c;助推终端厂商产品加速上市奠定了坚实的基础。 2023年…

网络之路26:STP生成树协议

正文共&#xff1a;2222 字 19 图&#xff0c;预估阅读时间&#xff1a;3 分钟 目录 网络之路第一章&#xff1a;Windows系统中的网络 0、序言 1、Windows系统中的网络1.1、桌面中的网卡1.2、命令行中的网卡1.3、路由表1.4、家用路由器 网络之路第二章&#xff1a;认识企业设备…

农产品加工行业分析:我国产业总产值共计7.17万亿元

农产品加工是用物理、化学和生物学的方法&#xff0c;将农业的主、副产品制成各种食品或其他用品的一种生产活动。是农产品由生产领域进入消费领域的一个重要环节。主要包括粮食加工、饲料加工、榨油、酿造、制糖、制茶、烤烟、纤维加工以及果品、蔬菜、畜产品、水产品等的加工…

Windows创建服务(.NET8)

windows服务 Windows服务是一种在Windows操作系统中运行的后台程序&#xff0c;用于在系统启动时启动并在系统关闭时关闭。这些服务可以是Microsoft自己的服务&#xff0c;也可以是第三方软件的服务。它们在后台运行&#xff0c;通常不需要交互式用户界面。 Windows服务通常用…

Windows(Microsoft)win电脑装Xcode方法

你想在你的Windows电脑上体验和使用苹果的Xcode进行应用打包。遗憾的是&#xff0c;Xcode官方只支持macOS操作系统&#xff0c;但别担心&#xff0c;我们有替代方案可以让你在Windows环境下进行iOS应用的开发和打包。接下来我将指导你如何实现这一目标。 图片来源&#xff1a;W…

Linux中的网络配置

本章主要介绍网络配置的方法 网络基础知识查看网络信息图形化界面修改通过配置文件修改 1.1 网络基础知识 一台主机需要配置必要的网络信息&#xff0c;才可以连接到互联网。需要的配置网络信息包括IP、 子网掩码、网关和 DNS 1.1.1 IP地址 在计算机中对IP的标记使用的是3…

协议栈的内部结构

上层会向下层逐层委派工作。 最上面的部分是网络应用程序&#xff0c;它们会将收发数据等工作委派给下层的部分来完成。尽管不同的应用程序收发的数据内容不同&#xff0c;但收发数据的操作是共通的。 应用程序的下面是Socket库&#xff0c;其中包括解析器&#xff0c;解析器…