微信小程序实现数值监听(页面和组件属性)

这篇具有很好参考价值的文章主要介绍了微信小程序实现数值监听(页面和组件属性)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介

目前文章主要介绍对页面属性值的监听以及组件属性值的监听。需要异页面监听数据,请跳转至另一个文章介绍

为什么需要监听属性值

当需要通过一个属性变化时候,需要计算相应的方法等。pc网站经常需要监听属性,那么小程序应该怎么去实现?

实现方法

1、首先创建公共的watch.js

export function setWatcher(page) {
    let data = page.data;
    let watch = page.watch;
    Object.keys(watch).forEach(v => {
        let key = v.split('.');
        let nowData = data;
        for (let i = 0; i < key.length - 1; i++) {
            nowData = nowData[key[i]];
        }
        let lastKey = key[key.length - 1];
        let watchFun = watch[v].handler || watch[v];
        let deep = watch[v].deep;
        observe(nowData, lastKey, watchFun, deep, page);
    })
}
   
function observe(obj, key, watchFun, deep, page) {
    var val = obj[key];
    if (deep && val != null && typeof val === 'object') {
        Object.keys(val).forEach(childKey => {
            observe(val, childKey, watchFun, deep, page);
        })
    }
    Object.defineProperty(obj, key, {
        configurable: true,
        enumerable: true,
        set: function(newVal) {
            watchFun.call(page, newVal, val); 
            val = newVal;
            if (deep) {
                observe(obj, key, watchFun, deep, page);
            }
        },
        get: function() {
            return val;
        }
    })
}
module.exports = {
    setWatcher: setWatcher
}

2、在页面引用公共的watch.js。

import { setWatcher } from '../../utils/watch';

3、初始化监听方法

setWatcher(this);//可以放进onload或者input里面等

4、写入监听方法

//page页面
watch: {
        val(v) {
        console.log(v)
        },
        count: {//监听count属性值
        handler(v,o) {
            console.log('新值:'+v,'旧值:'+o)
            if(v!==o){
            console.log('被改了')
            }else{
            console.log('没改')
            }
        },
        deep: true
        }
    },
//组件就调用observe方法

小结

微信小程序监听属性值非常的简单,只需要调用公共的js然后监听属性值即可。大大提高开发的效率。有不足之处望指正修改,一起探讨哦~!文章来源地址https://www.toymoban.com/news/detail-701597.html

到了这里,关于微信小程序实现数值监听(页面和组件属性)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 - 最新超详细 watch 侦听器功能,支持监听对象、数组及各种复杂对象数据,可在任意页面或组件中使用(绝非网上千篇一律的 “setWatcher“ 不能监听对象的垃圾方法,方案开箱即用)

    网上的教程全都是一摸一样的 setWatcher(this) 方案,重要的是这种方案不能监听对象,可以说一无是处。 本文 在微信小程序中实现 watch 监听器监听数据的功能,让小程序拥有 watch 监听对象、数组等复杂数据变化的能力, 您按照教程几分钟就能搞定,保证 100% 好用且使用方法

    2024年02月11日
    浏览(125)
  • 监听微信小程序页面的数据变化

    1、数据监听是为了当数据发生变化时,做一些操作; 2、它的作用相当于Vue中的watch 侦听器 先看效果: 第一、先在页面中使用          ①: 创建watch文件         ②:在页面中引入并使用         wxml:         js: 第二:在组件中使用数据监听           ①:wxml:  

    2024年02月16日
    浏览(59)
  • 微信小程序监听页面跳转API

    2024年02月15日
    浏览(46)
  • 微信小程序——监听页面滑动(一)onPageScroll

    知识专栏 专栏链接 微信小程序专栏 https://blog.csdn.net/xsl_hr/category_12338067.html?spm=1001.2014.3001.5482 微信小程序——Git版本管理 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 有关 微信小程序 的相关知识可以前往微信小程序官方文档查看了解!! 微信小程序官方文档

    2024年02月09日
    浏览(42)
  • 微信小程序常用页面监听跳转方法

    使用wx.navigateTo(Object object)方法跳转,此跳转方法会保留当前页面,将跳转到应用内的某个页面,特别注意,此方法不能跳到 tabbar 页面,也就是咱们常用的底部菜单栏对应的tabbar 页面。具体示例代码: 这只是常见的用法,如果需要数据回调,可参考微信官方文档。 2. 使用

    2024年02月13日
    浏览(50)
  • 【微信小程序】-- 自定义组件 - 数据监听器 (三十四)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月09日
    浏览(48)
  • 微信小程序——常用组件的属性介绍

    text 文本组件 类似于HTML中的span标签,是一个行内元素 rich-text 富文本标签 支持把HTML字符串渲染为WXML结构 text标签的基本使用 通过text组件的selectable属性,实现长按选中文本内容的效果。只有text标签支持长按选中效果,其他的组件是不支持的 结构内容代码: view class=\\\"text-

    2024年02月07日
    浏览(75)
  • 微信小程序(页面组件)

    1.1 组件的定义及属性 组件是页面视图层(WXML)的基本组成单元,组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图    基础内容、表单、导航、多媒体、地图、画布、开放能力等8类(30多个)基础组件。 每一个组件都由一对标签组成,有开始台标签和

    2024年04月11日
    浏览(33)
  • 微信小程序——页面事件,.启用下拉刷新监听页面的下拉刷新事件,上拉触底事件,停止下拉刷新的效果

    下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。 启用下拉刷新有两种方式: a.全局开启下拉刷新 在 app.json 的window 节点中,将 enablePullDownRefresh 设置为 true. b.局部开启下拉刷新 在页面的.json 配置文件中,将 enablePull

    2024年01月25日
    浏览(61)
  • 【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月09日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包