文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序实现事件传参与数据同步流程详解

2024-04-02 19:55

关注

在事件处理函数中为data中的数据赋值

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

hacker.wxml

<button type="primary" bindtap="CountChange">+1 按钮</button>

hacker.js

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

事件传参

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

<button type="primary" bindtap='btnHandler(123456)'>事件传参</button>

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

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

info:参数名字

2:参数值

<button type="primary" bindtap="btnHandler" data-info="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{2}}">事件传参</button>

在事件处理函数中,通过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

<button type="primary" bindtap="btnHandler" data-info="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{2}}">+2按钮</button>

运行结果如下:

bindinput的语法格式

在小程序中,通过input事件来响应文本框的输入事件,语法格式如下:

①通过bindinput,可以为文本框绑定输入事件

<input bindinput="inputHandler"></input>

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

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

运行结果如下:

实现文本框和data之间的数据同步

实现步骤

①定义数据

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

②渲染结构

<input value="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{msg}}" bindinput="iptHandler"></input>

③美化格式

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

④绑定input事件处理函数

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

运行结果如下:

到此这篇关于微信小程序实现事件传参与数据同步流程详解的文章就介绍到这了,更多相关小程序事件传参内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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