文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

【微信小程序】事件传参与数据同步

2023-08-17 09:00

关注

✅作者简介:CSDN内容合伙人、阿里云专家博主、51CTO专家博主🏆
📃个人主页:hacker707的csdn博客
🔥系列专栏:微信小程序🥇
💬个人格言:不断的翻越一座又一座的高山,那样的人生才是我想要的。这一马平川,一眼见底的活,我不想要,我的人生,我自己书写,余生很长,请多关照,我的人生,敬请期待💖💖💖

在这里插入图片描述

通过调用this.setData(dataObject)方法,可以给页面data中的数据重新赋值,示例如下:

hacker.wxml

hacker.js

Page({    data:{        count:0    },   // +1按钮的点击事件处理函数   CountChange(){       this.setData({           count:this.data.count + 1       })   }})

在这里插入图片描述

小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数,例如,下面的代码不能正常运行:

因为小程序会把bindtap的属性值统一当做事件名称来处理,相当于调用一个名称为btnHandler(123456)的事件处理函数。

✅可以为组件提供data-自定义属性传参,其中代表的是参数的名字,示例如下:

info:参数名字
2:参数值

在这里插入图片描述

在事件处理函数中,通过event.target.dataset.参数名即可获取具体的参数值,示例代码如下:

 btnHandler(event){        // dataset是一个对象,包含所有通过data-*传来的参数项        console.log(event.target.dataset)        // 通过dataset可以访问具体的参数值        console.log(event.target.dataset.info)    },

✅代码如下:
hacker.js

Page({    data:{        count:0    },    btnHandler(e){        this.setData({            count:this.data.count + e.target.dataset.info        })    },})

hacker.wxml

🐱‍🏍运行结果如下:

在这里插入图片描述

在小程序中,通过input事件来响应文本框的输入事件,语法格式如下:
①通过bindinput,可以为文本框绑定输入事件

②在页面的.js文件中定义事件处理函数

Page({    inputHandler(e){        // e.detail.value 是变化过后,文本框的最新值        console.log(e.detail.value)    }})

🐱‍🏍运行结果如下:

在这里插入图片描述

实现步骤
①定义数据

Page({    data:{        msg:'你好,'    }, })

②渲染结构

③美化格式

input{    border:1px solid #eee;    padding:5px;    margin:5px;    border-radius:3px;}

④绑定input事件处理函数

iptHandler(e){        this.setData({            // 通过e.detail.value 获取文本框最新值            msg:e.detail.value        })    }

🐱‍🏍运行结果如下:

在这里插入图片描述

以上就是微信小程序之事件传参与数据同步
持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是hacker创作的动力💖💖💖

在这里插入图片描述

来源地址:https://blog.csdn.net/xqe777/article/details/127197169

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯