微信小程序:6.事件

什么事事件

事件就是渲染层到逻辑层的通讯方式,比如提交表单,按钮点击都可以看作一个事件。
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
    })
  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/575988.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

yudao-cloud微服务系统系统模块+后台管理系统成功运行

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列文章目录 第一章 芋…

【软件测试】终于有人讲明白:bug的分类和定级了!

01、bug的定义 一般是指不满足用户需求的则可以认为是bug&#xff0c;狭义指软件程序的漏洞或缺陷&#xff0c;广义指测试工程师或用户提出的软件可改进的细节、或与需求文档存在差异的功能实现等 对应三个测试目的&#xff1a; 为了发现程序的代码或业务逻辑错误 为了检查产…

《第二行代码》第二版学习笔记(6)——内容提供器

文章目录 一 运行时权限2.权限分类3 运行时申请权限 二、内容提供器1、 ContentResolver的基本用法2、现有的内容提供器3、创建自己的内容提供器2.1 创建内容提供器的步骤2.2 跨程序数据共享 内容提供器&#xff08;Content Provider&#xff09;主要用于在不同的应用程序之间实…

2024年大数据应用、智能控制与软件工程国际会议(BDAICSE2024)

2024年大数据应用、智能控制与软件工程国际会议(BDAICSE2024) 会议简介 我们诚挚邀请您参加2024年大数据应用、智能控制和软件工程国际会议&#xff08;BDAICSE2024&#xff09;。这次会议将在美丽的长沙市举行。 本次大会旨在汇聚全球大数据应用、智能控制、软件工程等领…

WebGIS

文章目录 GIS的全名是Geographic Information System&#xff0c;中文全名是地理信息系统。 它是在计算机硬、软件系统支持下&#xff0c;对整个或部分地球表层&#xff08;包括大气层&#xff09;空间中的有关地理分布数据进行采集、储存、管理、运算、分析、显示和描述的技术…

Windows搭建php文件管理服务Tiny File Manager并发布至公网可访问

文章目录 1. 前言2.Tiny File Manager网站搭建2.1.Tiny file manager下载和安装2.2 Tiny file manager网页测试2.3 内网穿透工具下载安装 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试总结 1. 前言 今天&#xff0c;笔者就为大家介绍一款只有两个文件…

大数据第七天

文章目录 吐槽一下这个是怎么需要真的这么大吗? 内核错误内核软死锁&#xff08;soft lockup&#xff09;我这个cpu很高吗?大模型都说了不超过80就行了 FinBi安装FinBI下载链接安装时间比较长 吐槽一下 dbeaver 查询hive 数据信息是真的慢&#xff0c;没有一点快的方式&…

鲁棒控制理论学习:静态状态反馈H∞控制器

鲁棒性&#xff0c;即系统的健壮性&#xff0c;是指在异常和危险情况下系统能够维持其功能和性能的能力。在控制系统中&#xff0c;鲁棒性表现为系统在参数摄动下维持某些性能的特性。例如&#xff0c;当控制系统面临输入错误、磁盘故障、网络过载或有意攻击等挑战时&#xff0…

dist包在windows的nginx下部署运行

nginx 附带下载包 我用夸克网盘分享了「nginx-1.18.0.zip」 链接&#xff1a;https://pan.quark.cn/s/e87bbf87a742 将dist放到html文件目录下 3.找到nginx的配置文件&#xff0c;conf 下&#xff0c;用编辑器打开 nginx.conf 编辑。 location ^~/api {rewrite ^/api/(.*)…

python--使用pika库操作rabbitmq实现需求

Author: wencoo Blog&#xff1a;https://wencoo.blog.csdn.net/ Date: 22/04/2024 Email: jianwen056aliyun.com Wechat&#xff1a;wencoo824 QQ&#xff1a;1419440391 Details:文章目录 目录正文 或 背景pika链接mqpika指定消费数量pika自动消费实现pika获取队列任务数量pi…

小型内衣裤洗衣机哪个牌子好?六大选购锦囊私藏分享

内衣洗衣机是现代家庭必不可少的小家电&#xff0c;它不仅方便快捷&#xff0c;还能够保持衣物清洁和卫生。然而&#xff0c;市场上洗衣机品牌众多&#xff0c;质量和性能参差不齐&#xff0c;使得消费者购买时难以做出选择。那么&#xff0c;小型内衣裤洗衣机哪个牌子好&#…

【java9】java9新特性之增强@Deprecated注解

一个使用Deprecated注解的元素&#xff0c;无论是一个类或是一个方法&#xff0c;可能是由以下原因导致了不应该再使用它&#xff1a; 使用它可能会导致错误&#xff1b;在未来的版本中不被兼容&#xff1b;在未来的版本中可能会被删除&#xff1b;存在更好的更有效的替代方法…

机械臂过程

rosdep install --from-paths src --ignore-src --rosdistro melodic0、安装机械手臂 官方教程&#xff1a; 前人教程&#xff1a;UR5机械臂仿真实例 rosdep update 出错&#xff0c;使用小鱼的大佬的 一键配置 wget http://fishros.com/install -O fishros && . fish…

软件测试报告的用途

软件测试报告的用途十分广泛&#xff0c;主要体现在以下几个方面&#xff1a; 评估软件质量&#xff1a;软件测试报告是对软件进行全面、系统测试后的总结&#xff0c;通过报告中的各项数据和结果&#xff0c;可以评估软件的质量水平&#xff0c;包括功能的完整性、性能的稳定…

STM32学习和实践笔记(22):PWM的介绍以及在STM32中的实现原理

PWM是 Pulse Width Modulation 的缩写&#xff0c;中文意思就是脉冲宽度调制&#xff0c;简称脉宽调制。它是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术&#xff0c;其控制简单、灵活和动态响应好等优点而成为电力电子技术最广泛应用的控制方式&#xff…

C++中布隆过滤器

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

获取boss直聘城市地区josn数据

获取boss直聘城市地区josn数据 当我需要爬取多个城市的地区的时候&#xff0c;只能手动点击&#xff0c;然后一个一个看 结果&#xff1a; 能看到所有区域所有子地区的地区代码 解析该JSON数据 import pandas as pd import requests code[] area[] 城市代码101210100 res…

微信小程序使用 Vant Weapp 中 Collapse 折叠面板 的问题!

需求&#xff1a;结合Tab 标签页 和 Collapse 折叠面板 组合成显示课本和章节内容&#xff0c;并且用户体验要好点&#xff01; 如下图展示&#xff1a; 问题&#xff1a;如何使用Collapse 折叠面板 将内容循环展示出来&#xff1f; js中的数据是这样的 代码实现&#xff1…

「屡教不改」又被罚,谁还在相信山姆?

值得信赖的品质」「全球进口品牌」……「更好的生活尽在山姆」。 作为全球最大的会员制商店&#xff0c;山姆这几年可以说在中国线下零售市场集体遇劫的背景下&#xff0c;逆势崛起&#xff0c;甚至可以说做到了独树一帜。‍‍‍‍‍‍ 背后的原因是什么&#xff1f;会员制这一…

react 使用WEB3.0控件开发包 V3.0接入海康威视摄像头

1、下载官方安装包&#xff1a; 2、安装官方插件 3、引入文件 在public/index 中引入监控依赖&#xff0c;这三个文件可以在下载的官方demo中找到 4、react 中使用 useEffect(() > { const ipInfo :[192.168.xxxx];//初始化摄像头const WebVideoCtrl window.WebVideoCtrl…