微信小程序:6.事件

server/2025/1/15 22:08:28/

什么事事件

事件就是渲染层到逻辑层的通讯方式,比如提交表单,按钮点击都可以看作一个事件。
CleanShot 2024-04-19 at 09.52.06@2x.png

小程序中常用的事件

CleanShot 2024-04-19 at 09.52.35@2x.png

事件对象属性列表

当事件回调时,会收到一个事件对象event,他详细属性如夏表所示:
CleanShot 2024-04-19 at 09.53.48@2x.png

target和currentTarget的区别

target是触发该事件的源头组件,而currentTarget则是当前时间所绑定的事件:
CleanShot 2024-04-19 at 09.58.17@2x.png

bindtap的语法格式

小程序中不会通过onclick进行鼠标点击时间,而是通过tap事件响应用户的触摸事件

//在js中定义
outerHandle(e){console.log(e)}
<view class="outview"><button type="primary" bind:tap="outerHandle">按钮</button>
</view>

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

通过调用this.setData(dataObject)方法,可以给页面中的data中的数据重新赋值
CleanShot 2024-04-19 at 10.06.06@2x.png
点击按钮number进行增加

<view class="outview"><text>{{number}}</text><button type="primary" bind:tap="outerHandle">按钮</button>
</view>

事件传参

小程序中的事件穿参比较特殊,不能在绑定事件的同时进行传递参数
小程序中可以为组件童工data-自定义属性穿参,其中代表的是参数的名字,示例代码如下:

<button bind:tap="btnhandle" data-info="{{2}}">事件穿参数</button>

最终info会被解析为参数的名字
数字2会被解析为参数的值
在事件处理函数中可以使用event.target.dataset.参数名,可以拿到具体参数值

btnhandle(event){console.log(event.target.dataset)console.log(event.target.dataset.info)}

bindinput事件

小程序中通过input来响应文本框输入事件
1.通过bindinput,可以为文本框绑定输入事件

<input type="text" bindinput="inputHandle"/>

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

 inputHandle(e){console.log(e.detail.value)}

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

实现步骤

  1. 定义数据
  2. 渲染结构
  3. 美化样式
  4. 绑定input事件处理函数
Page({/*** 页面的初始数据*/data: {msg:"你好",},

2.在wxml中定义input绑定msg并且定义事件

 inputHandle(e){// console.log(e.detail.value);this.setData({msg:e.detail.value})},

http://www.ppmy.cn/server/19083.html

相关文章

VUE3与Uniapp 三 (Class变量和内联样式)

<template><!-- 通过class绑定开启或关闭某个CSS --><view class"box" :class"{box2:true}">box1</view><view class"box" :class"{box2:isActive}">box2</view><!-- 使用三元表达式实现开启关…

宠物饮水机缺液提醒报警功能如何实现

宠物饮水机是一种专门为宠物设计的设备&#xff0c;用于提供新鲜的水源。这些饮水机通常具有自动供水功能&#xff0c;能够保持水的清洁和新鲜度。宠物饮水机通常包括一个水箱和一个水泵&#xff0c;通过水泵将水从水箱中抽取出来&#xff0c;然后流入一个小水槽或喷水口&#…

sklearn 笔记 metrics

1 分类 1.1 accuracy_score 分类准确率得分 在多标签分类中&#xff0c;此函数计算子集准确率&#xff1a;y_pred的标签集必须与 y_true 中的相应标签集完全匹配。 1.1.1 参数 y_true真实&#xff08;正确&#xff09;标签y_pred由分类器返回的预测标签normalize 默认为 Tr…

Windows10如何关闭Edge浏览器的Copilot

在Windows10更新后&#xff0c;打开Edge浏览器&#xff0c;无论复制什么内容&#xff0c;都会弹出Copilot人工智能插件&#xff0c;非常令人反感&#xff0c;网上搜索的关闭方法都非常麻烦&#xff0c;比如&#xff1a;组策略和注册表。自己摸索得出最简便有效的关闭方法。 1、…

day03--react中对state的理解

一、react中的state 1.state是组件对象最重要的属性&#xff0c;值是对象&#xff08;可以包含多个key-value的组合&#xff09; 2.组件被称为“状态机”&#xff0c;通过更新组件的state来更新对应的页面显示&#xff08;重新渲染组件&#xff09; 注意&#xff1a; &#xf…

2024 OceanBase 开发者大会:OceanBase 4.3正式发布,打造近PB级实时分析数据库

4月20日&#xff0c;2024 OceanBase开发者大会盛大召开&#xff0c;吸引了50余位业界知名的数据库专家和爱好者&#xff0c;以及来自全国各地的近600名开发者齐聚一堂。他们围绕一体化、多模、TP与AP融合等前沿技术趋势展开深入讨论&#xff0c;分享场景探索的经验和最佳实践&a…

相亲交友APP小程序H5系统婚恋交友社交软件开发语音视频聊天平台定制开发

产品亮点 随着移动互联网的到来&#xff0c;人们的交友方式也呈现了更多新鲜的方式&#xff0c;很多人通过手机app结交了更多的新朋友。当然个例是不能代表整体的&#xff0c;仍然有着很大的一部分的人不知道如何交友&#xff0c;对于交友更是一窍不通&#xff0c;面对这样广阔…

裸金属服务器使用效果好吗

在当今的数字化时代&#xff0c;信息技术的飞速发展&#xff0c;云计算技术已经成为企业信息化建设的重要基石。在众多计算资源中&#xff0c;裸金属和云服务器是两种主流的服务模式&#xff0c;它们各有千秋&#xff0c;为不同的用户需求提供了适合的解决方案。而裸金属服务器…