微信小程序 button按钮怎么触发事件? bindtap语法怎么使用?

news2024/9/21 20:28:02

在前端网页中我们需要触发一个事件如果按钮点击后调用函数,文本、图片、链接被点击后调用一个函数一个事件,我们都知道用click,可是微信小程序中的click是不存在的,他怎么才能和网页中一样的使用click的呢?

1.bindtap语法的使用

这时候有人肯定会问,我不是来学习click的怎么教我bindtap语法使用了?

其实不然,bindtap是微信小程序中的onclick鼠标点击事件

在小程序中,不存在HTMLZ中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为。

①通过bindtap,可以为组件绑定tap触摸事件,语法如下:

<button type="primary" bindtap="onclick">按钮</button>

 ②在页面的.js文件中定义对应的事件处理函数,事件参数通过形参event(一般简写成e)来接收:

Page({
  onclick(e){
    console.log(e)
  }
})

我们尝试需要点击按钮输出e里面是啥

我们会看多很多参数,这时候不用怕,我给大家讲解一些常用的。

属性类型说明基础库版本
typeString事件类型
timeStampInteger事件生成时的时间戳
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组

 2.1.type属性

我们从图书看出在bindtap事件中他返回的是tap,其实我们事件有很多种

 以上三种是我们最常见的,是否还有其他属性我们可以前往微信小程序帮助文档进行查看

2.2.timeStamp属性

这个属性就是代表我们WXML页面从打开后开始计时,到事件被触发为止显示的一个时间戳

单位时毫秒

 2.3 target属性

target属性是我们最长用到的属性,所以我给他标红了,

看图明白一个大概,后面实战种使用到我们会详细讲解,现在都做一个了解

2.4  currentTarget属性

  currentTarget属性和target属性其实是一样的,但是他有一个小小的区别

看图我们是不是以为 他们2个没有区别数据都是一样的,其实currenttarget属性是指向当前组件的父组件,

我们会在后面推文种写出他两的本质区别,可以进入主页进行查看文章

2.5 touches和changedtouches属性

其实他们两个属性也是一样的道理,一句话概括他们, 当用户进行多个手指触摸屏幕会留下痕迹,被这两个属性记录,然后返回给后台。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

编程思想-0x00架构

产生架构的原因&#xff1f; 1、代码均摊 将不同的代码进行分块&#xff0c;然后简历联系&#xff0c;低耦合、高内聚&#xff1b; 原则上&#xff1a;合理的App架构应该是合理分配每个类、结构体、方法、变量的存在都应该遵循单一职责的原则 2、便于测试 测试确保代码质量&…

【编程基础之Python】3、创建Python虚拟环境

【编程基础之Python】3、创建Python虚拟环境创建Python虚拟环境为什么需要虚拟环境Windows上的Anaconda创建虚拟环境conda 命令conda env 命令创建虚拟环境切换虚拟环境验证虚拟环境Linux上的Anaconda创建虚拟环境创建虚拟环境切换虚拟环境验证虚拟环境总结创建Python虚拟环境 …

性能优化方向

性能怎么样就看io的应用&#xff0c;网络和数据库要好好设计&#xff0c;能一次查出来就一次。 对外接口尽量不要多创建对象&#xff0c; 少用bean复制 少用getbean(.class) 缓存不要频繁操作&#xff0c;最好异步 循环不要调用数据库&#xff0c;调用接口最好批量 Compon…

UG NX二次开发(C#)-UIStyler-创建长方体

文章目录 1、前言2、UG NX自动的创建长方体界面3、在块样式编辑器中创建UI界面4、创建一个工程5、在创建按钮中添加代码6、调用dll7、结论1、前言 UG NX二次开发中,UIStyler是一种非常高效的开发方式,UG NX已经为我们提供了比较完善的UIStyler开发模板,只要通过拖动的方式就…

GAN系列基础知识

原始值函数 原始GAN的值函数是 minGmaxDV(D,G)Ex∼pdata(x)[logD(x)]Ez∼pz(z)[log(1−D(G(z)))]min_Gmax_DV(D,G) E_{x \sim p_{data}(x)}[logD(x)]E_{z \sim p_{z}(z)} [log(1-D(G(z)))]minG​maxD​V(D,G)Ex∼pdata​(x)​[logD(x)]Ez∼pz​(z)​[log(1−D(G(z)))] 其中Ex…

尚医通(十二)SpringCloud相关概念介绍 | 搭建Nacos服务

目录一、什么是微服务1、微服务的由来2、为什么需要微服务3、微服务与单体架构区别4、微服务本质5、什么样的项目适合微服务6、微服务开发框架7、什么是Spring Cloud8、Spring Cloud和Spring Boot是什么关系9、Spring Cloud相关基础服务组件10、Spring Cloud的版本二、Nacos1、…

XXL-JOB 极简入门

文章目录1 概述2 特性3 架构设计3.1设计思想3.2 系统组成3.3架构图3.4 高可用3.4.1 调度中心的高可用3.4.2 执行器的高可用4 搭建调度中心4.1 克隆源码4.2 初始化 XXL-JOB 表结构修改配置文件4.4 修改日志配置文件4.5 IDEA 启动调度中心4.6 编译源码4.7 命令行启动调度中心4.8 …

D32 Vue2 + Vue3 K124-K143

D32.Vue F21.创建vue3项目&#xff08;K124-K129&#xff09; 该笔记是从vue2过渡到vue3的&#xff0c;所以不会特别详细的介绍某些vue2学过的&#xff0c;主要介绍vue3新增的 1.Vue3快速上手 A. Vue3简介 1&#xff09;2020年9月18日&#xff0c;Vue.js发布3.0版本&…

高性能(一)

思维导图 一、负载均衡 1.概念 将用户请求分摊到不同服务器上处理&#xff0c;以提高系统整体的并发处理能力及可靠性。 如图&#xff1a;我们用到负载均衡&#xff0c;实现访问商品服务的请求的分流。 负载均衡是一种常用且简单的提高系统并发和可靠性的手段&#xff0c;单…

MySQL入门篇-MySQL 二进制日志binlog介绍

MySQl binlog介绍 binlog的作用 逻辑日志,记录的是数据库内部的所有变动&#xff08;sql语句 行的改变&#xff09; server层日志&#xff0c;binlog不仅仅记录innodb的变动&#xff0c;也记录myisam存储引擎的变动。 innodb redo 是存储引擎层&#xff0c;和binlog不是一层&…

spark02-内存数据分区切分原理

代码&#xff1a;val conf: SparkConf new SparkConf().setMaster("local[*]").setAppName("wordcount") val scnew SparkContext(conf) //[1] [2,3] [4,5] val rdd: RDD[Int] sc.makeRDD(List(1,2,3,4,5),3) //将处理的数据保存分区文件 rdd.saveAsText…

【PTA Advanced】1152 Google Recruitment(C++)

目录 题目 Input Specification: Output Specification: Sample Input 1: Sample Output 1: Sample Input 2: Sample Output 2: 思路 代码 题目 In July 2004, Google posted on a giant billboard along Highway 101 in Silicon Valley (shown in the picture below)…

清除 git 所有历史提交记录,使其为新库

清除 git 所有历史提交记录&#xff0c;使其为新库需求方案需求 基于以前的仓库重新开发&#xff0c;这样可保留以前的配置等文件&#xff0c;但是需要删除全部的历史记录、tag、分支等。 方案 创建新的分支 使用 --orphan 选项&#xff0c;可创建1个干净的分支&#xff08;无…

设置测试用例的具体方法

文章目录一、等价类分区/分块的概念等价类的划分二、边界值三、因果图(判定表)四、场景设计法五、错误猜测法总结一、等价类 用户的密码为6~18位,测试的时候使用到的测试数据是什么? 穷举法,6,7,8,9,10…18全部都测试一边,可以 但是将范围改成6~1000位,穷举法就不可取了 分区/…

从零实现高并发WebRTC服务器(五):ICE协议

文章目录零、ICE具体做些什么一、ICE协议是什么二、ICE Candidate2.1 ICE CANDIDATE TYPE2.2 收集candidate零、ICE具体做些什么 收集candidate对不同type的所有candidate pair进行排序&#xff0c;比如优先使用同一内网的host candidate连通性检查 一、ICE协议是什么 ICE,i…

线性杂双功能PEG试剂OPSS-PEG-Acid,OPSS-PEG-COOH,巯基吡啶聚乙二醇羧基

英文名称&#xff1a;OPSS-PEG-COOH&#xff0c;OPSS-PEG-Acid 中文名称&#xff1a;巯基吡啶-聚乙二醇-羧基 OPSS-PEG-COOH是一种具有OPSS和羧基的线性杂双功能PEG试剂。它是一种有用的带有PEG间隔基的交联剂。OPSS代表正吡啶基二硫化物或邻吡啶基二硫代&#xff0c;与硫醇、…

Java 修饰符和运算符,超详细整理,适合新手入门

目录 一、访问控制修饰符 1、访问权限 二、运算符 1、算术运算符 2、关系运算符 3、逻辑运算符 4、赋值运算符 5、三元运算符 一、访问控制修饰符 Java 支持 4 种不同的访问权限&#xff1a; private 私有的 protected 受保护的 public 公共的 default 默认 1、…

程序员必备小众又实用的网站,你知道几个?

程序员是世人眼中的高薪职业&#xff0c;虽然亚历山大&#xff0c;但是年收入非常可观。 职场上的程序员有很多所谓的标签&#xff0c; 比如&#xff1a;秃头&#xff0c;找不到女朋友&#xff0c;和产品经理的斗智斗勇等等.... 可以说&#xff0c;一个程序员的必备素养就是…

【C++11智能指针】unique_ptr

【C11智能指针】unique_ptr 概述 一个 unique_ptr “拥有”它所指向的对象。 与 shared_ptr 不同&#xff0c;某个时刻只能有一个 unique_ptr 指向一个给定对象。 当 unique_ptr 被销毁时&#xff0c;它所指向的对象也被销毁。 初始化 直接初始化 unique_ptr<int> p…

AcWing 166. 数独(DFS + 剪枝优化 + lowbit函数 + 状态压缩)

AcWing 166. 数独&#xff08;DFS 剪枝优化 lowbit函数 状态压缩&#xff09;一、题目二、分析1、状态压缩2、lowbit函数&#xff08;1&#xff09;函数作用&#xff08;2&#xff09;函数实现3、DFS思路4、剪枝优化三、代码一、题目 二、分析 1、状态压缩 那么如果针对某一…