草庐IT

【微信小程序】一文解忧,事件绑定

前端小刘不怕牛牛 2023-04-11 原文

🍒 观众老爷们好呀,小程序系列的新文章又来啦,即使是暑假也不能停止学习呀!上文我们详细了解了微信小程序WXML模板语法中的数据绑定,小程序中的事件绑定也是我们必须掌握的方法。
🍒 那么现在我们就开始学习吧,小本本快拿出来记笔记呀。

文章目录

一,事件基础

首先我们来理清事件的概念:事件从本身上就是渲染层到逻辑层的通讯方式,用户的行为,可以在渲染层通过事件反馈到逻辑层,然后由逻辑层判断进行业务处理。

而事件绑定,其实就是将事件绑定在组件上,当事件被触发时,就会执行逻辑层中对应事件的处理函数。

1.1 事件的使用方式

接下来我们来具体使用一下事件处理业务

  1. 首先,我们需要在组件中绑定一个事件处理函数,这里用点击事件bindtap来样式,它类似我们我们网页开发中的click点击事件。
<button bindtap="tapName" type="primary">click me!
</button>
  1. 第二步,在该页面对应的JS文件用的page函数中定义响应的事件处理函数,参数为eventore,这时候,用户点击组件便会调用该处理函数。
Page({
	tapName: function(e){
		console.log(e)
	}
})

效果如下:

1.2 事件分类

简单来分,事件可以被分为冒泡事件非冒泡事件

  • 冒泡事件:当一个组件上的事件被触发,该事件会向父节点传递。
    比如当我们在子组件发生点击事件tap,点击将会继续向父组件一级一级冒泡式触发,如果某一级组件有设置相对应事件处理函数,该函数将会被执行。
  • 非冒泡事件:与上述相反,事件在子组件触发,不会向父节点传递。

实例展示:
wxml文件设置

<view bindtap="tapfather">
<button bindtap="tapson" type="primary">click me!</button>
</view>

页面JS文件设置

控制板输出:

WXML冒泡事件列表:

类型触发条件
touchstart手指触摸动作开始
touchmove手指触摸后移动
touchcancel手指触摸动作被打断,如来电提醒
touchend手指触摸动作结束
tap手指触摸后马上离开
longpress手指触摸超350ms再离开(如果指定了事件处理函数,则tap事件不被触发)、

其他事件基本均为非冒泡事件,如inputinput事件(文本框输入),scroll-viewscroll事件

二,事件进阶

掌握上述内容,我们就可以简单的应用事件,完成渲染层与逻辑层的交互。

接下来是事件比较深入的内容。

2.1 阻止冒泡事件

向我们的网页开发一样,事件的冒泡不一定是我们想要的,有时候我们需要阻止事件的冒泡,而在微信小程序开发中,我们用catch实现。

bind外,catch也可以用来绑定事件,注意,与bind不同,catch事件会阻止事件向上冒泡。

如我们上面1.2节的一个案例,当我把组件绑定的关键词,改为catch,那么在控制板就只会输出一行文字——子组件触发点击事件。

使用法如下:

<view catchtap="tagName"></view>

2.2 事件对象

我们在之前定义事件处理函数,有小伙伴可能就注意到了,事件的处理函数我们会传入一个参数用event或者e,这个就是接收一个事件对象。

其实,当组件触发事件的时候,逻辑层绑定该事件的处理函数会收到一个事件对象,这时候我们设置的传入参数,就可以接收这个对象,获取一下放在该对象的信息。

接下来我们看看事件对象下有哪些属性。

  • type,存放事件类型。
  • timeStamp,事件生成时的时间戳
  • target,触发事件的组件的一些属性值集合,简单理解,就是当事件触发后,该event对象的target就会指向源头组件,如冒泡,指向最先触发的组件。
  • currentTarget,当前组件的一些属性值集合,这个与target的区别就是,它指向的是目前正在触发的组件。
  • detail,格外信息
    如:
  • touches,触摸事件,当前停留在屏幕中的触摸点信息数组

2.3 data中数据赋值

动态数据绑定,动态改变数据我们就可以通过事件处理的回调函数事件,通过用户的行为,改变我们放在data中的数据。

我们用到this.setData(dataObject)方法

如下所示:
WXML文件设置

<view bindtap="changedata">{{info}}</view>

页面js文件设置

changedata : function(e){
	this.setData({
		info : "hello"
	})
}

这时候点击view组件,就可以实现数据值的变化。

🍒本文到这里就结束啦,如果觉得对您有帮助的话,可以关注牛牛 后续的文章,感谢您的支持,我们下次再见!

债见~~

有关【微信小程序】一文解忧,事件绑定的更多相关文章

  1. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式? 最佳答案 您可以像这样为日期选择器提供额外的选项,而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义,我们在StackOverflow上找到一个类似的问题: https://s

  2. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

    我正在尝试在Rails上安装ruby​​,到目前为止一切都已安装,但是当我尝试使用rakedb:create创建数据库时,我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

  3. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  5. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  6. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord,它正在融化我的大脑。deletefromtablewhereid有什么想法吗?我想做的是限制表中的行数。所以,我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看,您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  7. ruby-on-rails - 事件管理员和自定义方法 - 2

    这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是,当我单击“导入项目”按钮时,我想在Controller中执行rake任务。但是我无法访问该方法。可能是什

  8. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录? - 2

    例如,假设我有一个名为Products的模型,并且在ProductsController中,我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下,在product_listView中,用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是,每次用户选择新的order_by过滤器时,rails是否必须查询,或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序?有没有一种方法可以编写它,以便在用户排序时rails不会重新查询结果

  9. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务,每x秒轮询一次队列,并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外,还有其他稳定的替代方案吗? 最佳答案 尽管启动基于Rails的持久任务是一种选择,但您可能希望查看更有序的系统,例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西,因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的,因为Rails上的启动时间通常为5-15秒,具体取决于您的硬件。不过,每天这样做几

  10. ruby-on-rails - 使用 Rails 事件记录获取二级模型 - 2

    我有一个帖子属于城市的关系,城市又属于一个州,例如:classPost现在我想找到所有帖子及其所属的城市和州。我编写了以下查询来获取带有城市的帖子,但不知道如何在同一查找器中获取带有城市的相应州:@post=Post.find:all,:include=>[:city]感谢任何帮助。谢谢。 最佳答案 Post.all(:include=>{:city=>:state}) 关于ruby-on-rails-使用Rails事件记录获取二级模型,我们在StackOverflow上找到一个类似的问

随机推荐