前言
- 需要用到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