深入学习小程序第二天:事件处理与用户交互
一、概念
1. 事件绑定与类型
在小程序中,通过在组件上添加特定的属性(如 bind 开头的属性)来绑定事件处理函数,以响应用户的交互操作。常见的事件类型包括触摸事件、表单事件和系统事件:
- 触摸事件:用于响应用户在页面上的触摸操作,例如
bindtouchstart、bindtouchmove、bindtouchend等。 - 表单事件:用于监听表单元素的输入变化或选择操作,例如
bindinput、bindchange等。 - 系统事件:用于监听页面滚动、尺寸改变等系统层面的事件,例如
bindscroll、bindresize等。
2. 事件处理函数与事件对象
当事件被触发时,会调用事先定义好的事件处理函数。事件处理函数接收一个事件对象 event,其中包含了触发事件的详细信息,如触发事件的组件、触摸点的位置、输入框的输入内容等。开发者可以通过 event.currentTarget 获取当前触发事件的组件,以及通过 event.detail 获取具体的事件信息。
3. 事件冒泡与捕获
小程序事件系统支持事件的冒泡和捕获阶段:
-
事件冒泡:事件从触发事件的最内层组件开始向外层组件传递,逐级触发父组件的事件处理函数。常用的是以
bind开头的事件绑定属性,如bindtap。 -
事件捕获:事件从最外层组件开始向内层组件传递,首先触发最外层组件的事件处理函数。捕获阶段的事件绑定属性通常以
catch开头,如catchtap。
通过合理使用事件冒泡和捕获,开发者可以控制事件在组件层级中的传递和响应顺序,实现更精细化的交互设计。
4. 用户交互与反馈
通过事件处理,开发者可以实现丰富的用户交互和反馈效果,例如:
- 根据用户的触摸操作更新页面内容或状态。
- 监听用户在表单元素中的输入或选择,实现实时的数据交互。
- 根据用户点击按钮或其他交互元素来导航到不同的页面或执行特定的操作。
这些交互效果不仅提升了用户体验,还能增加应用的互动性和功能性,使应用更加吸引人和实用。
二、用法
1. 事件绑定与类型
在小程序中,事件绑定通过在组件上添加特定的属性来实现。常见的事件类型包括:
- 触摸事件:用于响应用户在页面上的触摸操作。
bindtouchstart:手指触摸动作开始时触发。bindtouchmove:手指触摸后移动时触发。bindtouchend:手指触摸动作结束时触发。
示例:
<view bindtouchstart="touchStart">触摸我</view>
Page({touchStart: function(event) {console.log('触摸动作开始', event);}
});
- 表单事件:用于监听表单元素的输入变化或选择操作。
bindinput:输入框的输入内容发生变化时触发。bindchange:表单元素的值发生改变时触发。
示例:
<input type="text" bindinput="inputChange" placeholder="输入内容">
Page({inputChange: function(event) {console.log('输入框内容变化', event.detail.value);}
});
- 系统事件:用于监听系统层面的事件,如页面滚动、尺寸变化等。
bindscroll:页面滚动时触发。bindresize:页面尺寸改变时触发。
示例:
<scroll-view bindscroll="scrollHandler"><!-- 可滚动内容 -->
</scroll-view>
Page({scrollHandler: function(event) {console.log('页面滚动', event);}
});
2. 事件处理函数与事件对象
事件处理函数接收一个 event 参数,该参数包含了触发事件的详细信息,如触发事件的组件、触摸点位置等。
示例:
Page({buttonClicked: function(event) {console.log('按钮被点击了', event);let dataset = event.currentTarget.dataset;console.log('按钮上绑定的数据', dataset);}
});
在上述例子中,event.currentTarget 表示当前触发事件的组件,event.currentTarget.dataset 可以获取该组件上绑定的数据。
3. 事件冒泡与捕获
小程序事件系统支持事件冒泡和捕获。冒泡事件(以 bind 开头)会从触发的组件向上冒泡到父组件,而捕获事件(以 catch 开头)则在捕获阶段处理,不会冒泡。
<view bindtap="tapHandler"><button catchtap="catchHandler">按钮</button>
</view>
Page({tapHandler: function() {console.log('view 被点击');},catchHandler: function() {console.log('button 被点击,捕获阶段');}
});
在上述例子中,点击按钮时,catchtap 捕获阶段的事件处理函数先执行,然后再执行 bindtap 冒泡阶段的事件处理函数。
4. 用户交互与反馈
通过事件处理,可以实现丰富的用户交互效果,例如:
- 实时更新页面内容或状态,响应用户输入或操作。
- 根据用户点击进行页面跳转或提交表单数据。
- 使用手势操作(如滑动、双击)来实现更复杂的交互动作。
示例:
<button bindtap="navigateToPage">跳转到新页面</button>
Page({navigateToPage: function() {wx.navigateTo({url: '/pages/newPage/newPage'});}
});
三、总结
事件处理与用户交互是小程序开发中的核心内容之一,合理使用事件绑定和事件处理函数,可以为用户提供流畅、直观的应用体验。通过掌握事件类型、事件对象、事件冒泡与捕获等知识,开发者能够更灵活地应对各种用户操作,实现丰富的交互效果。
相关文章:
深入学习小程序第二天:事件处理与用户交互
一、概念 1. 事件绑定与类型 在小程序中,通过在组件上添加特定的属性(如 bind 开头的属性)来绑定事件处理函数,以响应用户的交互操作。常见的事件类型包括触摸事件、表单事件和系统事件: 触摸事件:用于响…...
操作系统快速入门(一)
😀前言 本篇博文是关于操作系统的,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉&…...
Spring Cloud微服务性能优化:策略、实践与未来趋势
标题:Spring Cloud微服务性能优化:策略、实践与未来趋势 摘要 在微服务架构中,服务调用链路的性能优化是确保系统高效运行的关键。Spring Cloud作为微服务架构的主流实现之一,提供了多种工具和方法来优化服务间的调用。本文将深…...
秒懂C++之多态
目录 一. 多态的概念 二. 多态的定义及实现 多态的构成条件 虚函数重写的例外 协变(基类与派生类虚函数返回值类型不同) 析构函数的重写(基类与派生类析构函数的名字不同) 练习例题 final override 重载、覆盖(重写)、隐藏(重定义)的对比 三. 抽象类 四. 多态的原理…...
C语言:求最大数不用数组
(1)题目: 输入一批正数用空格隔开,个数不限,输入0时结束循环,并且输出这批整数的最大值。 (2)代码: #include "stdio.h" int main() {int max 0; // 假设输入…...
零门槛成为HelpLook推荐官,邀好友加入,奖励享不停!
什么!? 还有谁不知道HelpLook推荐官计划! 只需要简单地注册加入 在好友成功订阅套餐之后 可一次性获得20%的丰厚现金返佣 HelpLook是一款快速搭建AI知识库的系统,并帮助企业0代码搭建帮助中心、FAQs、SOPs、产品文档、说明书和…...
基于python的图书馆大数据可视化分析系统设计与实现
博主介绍: 大家好,本人精通Java、Python、C#、C、C编程语言,同时也熟练掌握微信小程序、Php和Android等技术,能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验,能够为学生提供各类…...
利用formdata自动序列化和xhr上传表单到后端
//FormData对象是XMLHTTPRequest level2新增的类型,它可以自动序列化表单内容,不再需要我们去写序列化表单方法; FormData()即可以直接把整个表单给它,也可以分别使用append(‘字段’,‘值’)方法给FormData(); 现在就…...
视频号小店大地震?还好我看了原文
关注卢松松,会经常给你分享一些我的经验和观点。 我X,如果不是看了原文,我差点也上当了。虽然视频号小店关闭了450个类目,但又重新开放了412个类目啊。 昨天(8月9日),视频号一口气发了10个公…...
Genymotion adb shell
Genymotion 账户是 qq邮箱 参考 Ubuntu 20.04 安装 Android 模拟器 Genymotion https://www.zzzmh.cn/post/553cd96d4e47490a90b3302a76a93c0d Genymotion adb shell adb shell C:\Program Files\Genymobile\Genymotion\tools>adb shell lsusb Bus 001 Device 001: ID …...
探索AI与社交的交汇点:看Facebook如何引领智能化革命
在当今数字化时代,人工智能(AI)正成为各大科技公司变革的重要驱动力。作为全球领先的社交媒体平台,Facebook(现Meta Platforms)正处于这一智能化革命的前沿。通过不断创新和应用AI技术,Facebook…...
JVM 加载阶段 Class对象加载位置是在 堆中还是方法区?
在JVM(Java虚拟机)的类加载过程中,Class对象的加载位置涉及到堆(Heap)和方法区(Method Area)两个关键区域。具体来说,类的加载阶段涉及到将类的.class文件中的二进制数据读入到内存中…...
Android 获取短信验证
Android 获取短信验证 Android 获取短信验证 输入发短信的手机号,点击获取验证码,等接收到验证码后就会自动获取 SmsReceiver.Java import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; impor…...
负载均衡详细概念介绍之(四层和七层实现)
目录 一、负载均衡介绍 1.1什么是负载均衡 编辑 1.2 为什么要用负载均衡 二、负载均衡的类型 2.1 通过一些硬件实现 2.2 四层负载均衡 2.3 七层负载均衡 三、四层和七层的区别 及特点 一、负载均衡介绍 1.1什么是负载均衡 负载均衡:Load Balance,简称LB&a…...
力扣 | 递增子序列 | 动态规划 | 最长递增子序列、最长递增子序列的个数、及其变式
文章目录 一、300. 最长递增子序列二、673. 最长递增子序列的个数三、变式1、646. 最长数对链2、1218. 最长定差子序列3、1027. 最长等差数列4、354. 俄罗斯套娃信封问题5、1964. 找出到每个位置为止最长的有效障碍赛跑路线 最长递增子序列:原序-递增数值问题 最长定…...
008 | 基于RNN和LSTM的贵州茅台股票开盘价预测
基于RNN和LSTM的贵州茅台股票开盘价预测 项目简介: 本项目旨在通过使用Tushare下载贵州茅台的股票数据,并基于这些历史数据,使用TensorFlow 2.0实现循环神经网络(RNN)和长短期记忆网络(LSTM)来…...
尚硅谷谷粒商城项目笔记——六、使用navciat连接docker中的mysql容器【电脑CPU:AMD】
六、使用navciat连接docker中的mysql容器 注意: 因为电脑是AMD芯片,自己知识储备不够,无法保证和课程中用到的环境一样,所以环境都是自己根据适应硬件软件环境重新配置的,这里的虚拟机使用的是VMware。 1navicat免费…...
【git】本地更改了,但又想直接从远端拉取覆盖本地(放弃本地更改前行下载)
拉取时错误信息 error: cannot pull with rebase: You have unstaged changes. error: Please commit or stash them.个错误信息表明你在尝试使用git pull --rebase命令时,你的工作目录中存在未提交的更改(即未暂存(unstaged)的更…...
基于JSP的书店仓库管理系统
你好呀,我是计算机学姐码农小野!如果有相关需求,可以私信联系我。 开发语言:JSP 数据库:MySQL 技术:JSPJava 工具:ECLIPSE、Tomcat 系统展示 首页 管理员功能模块 用户功能模块 员工功能模…...
pytorch框架保存和加载模型
在 PyTorch 中,有几种常见的方法来保存和加载模型,具体方法取决于你想保存什么内容(例如,只保存模型的权重,还是保存整个模型)。下面我将介绍几种常见的保存和加载模型的方法。 1、保存和加载模型的 state…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
