【微信小程序创作之路】- 小程序事件绑定、动态提示Toast、对话框 Modal

【微信小程序创作之路】- 小程序事件绑定、动态提示Toast、对话框 Modal

第六章 小程序事件绑定、动态提示Toast、对话框 Modal


文章目录

  • 【微信小程序创作之路】- 小程序事件绑定、动态提示Toast、对话框 Modal
  • 前言
  • 一、事件是什么?
  • 二、小程序中常用事件
  • 三、事件传播
  • 四、指定回调函数阶段
  • 五、event事件对象属性
  • 六、target和currentTarget的区别
  • 七、代码示例
    • 1.函数前缀格式
    • 2.事件函数为全局数据赋值
    • 3.事件函数传参
  • 八、bindinput语法格式
  • 九、动态提示 Toast
  • 十、对话框 Modal
  • 总结


前言

本章主要讲解小程序事件绑定、动态提示Toast、对话框 Modal,结合代码示例,我们来研究一下!


一、事件是什么?

事件是视图层到逻辑层的通讯方式。事件是小程序和用户互动的主要方式,通过事件将用户在视图层的行为,反馈到逻辑层进行业务处理。
这里引用小白白大佬文章的图片(渲染层======视图层)。
在这里插入图片描述


二、小程序中常用事件

微信官方文档给出的小程序常用事件------>

类型绑定方式事件描述
tapbindtap 或 bind:tap触摸后马上离开,类似于 HTML 中的 click 事件。
inputbindinput 或 bind:input文本框输入事件。
changebindchange 或 bind:change状态改变时触发。
longpressbindlongpress 或 bind:longpress触摸后,超过 350ms 再离开。如果指定了该事件的回调函数并触发了该事件,tap事件将不被触发。
touchstartbindtouchstart 或 bind:touchstart触摸开始。
touchmovebindtouchmove 或 bind:touchmove触摸后移动。
touchcancelbindtouchcancel 或 bind:touchcancel触摸动作被打断,如来电提醒,弹窗等。
touchendbindtouchend 或 bind:touchend触摸结束。

三、事件传播

🍉🍉🍉事件传播阶段
想学习事件的知识,可以看阮一峰老师的文章

当事件发生后,会在子元素和父元素之间进行传播。这种传播分为三个阶段。
①第一阶段:从window对象传导至目标节点(上层传到底层),称之为捕获阶段(capture phase)
②第二阶段:在目标节点上触发,称之为目标阶段(target phase)
③第三阶段:从目标节点传导回window对象(从底层传回上层),称之为冒泡阶段(bubbling phase)

🧀我们通过代码来演示
🏀🏀🏀通过两个元素来看触发几次

<div><p>点击</p>
</div>

如果两个节点都设置click事件监听函数。对于<p>点击,click事件会触发四次:<div>节点的捕获阶段和冒泡阶段各一次,<p>节点的目标阶段触发了2次。
1、捕获阶段:事件从<div><p>传播时,触发<div>click事件;
2、目标阶段:事件从<div>到达<p>时,触发<p>click的时间;
3、冒泡阶段:事件从<p>传回<div>时,再次触发<div>click事件。
注:其中<p>节点有两个监听函数,所以他们都会因为click事件触发一次,共两次。

事件传播的最上层对象是window,接着依次是documenthtml(document.documentElement)body(document.body)。也就是说,上例的事件传播顺序,在捕获阶段依次为windowdocumenthtmlbodydivp,在冒泡阶段依次为pdivbodyhtmldocumentwindow


四、指定回调函数阶段

小程序可以通过属性指定各种事件的回调函数,并且可以指定在哪个阶段触发回调函数。

类型事件描述
capture-bind捕获阶段触发。
capture-catch捕获阶段触发,并中断事件,不再向下传播,即中断捕获阶段,并取消随后的冒泡阶段。
bind冒泡阶段触发。
catch冒泡阶段触发,并取消事件进一步向上冒泡。

五、event事件对象属性

详细属性列表如下:

属性类型事件描述
typeString事件类型
timeStampInteger事件生成时的时间戳
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
markObject事件标记数据
detailObject额外的信息
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组

六、target和currentTarget的区别

target:触发事件的源头组件。
currentTarget:当前事件所绑定的组件

🧀我们通过代码来演示
🏀🏀🏀通过代码来区分一下

<view ><text class="title">hello </text><button  bindtap="buttonHandler" type="primary">按钮</button>
</view>

js文件

buttonHandler(event) {console.log("event" ,event);console.log("源头组件" ,event.target);console.log("当前事件所绑定的组件" ,event.target);},

输出结果
在这里插入图片描述
分析结果:
e.target:内部<button>按钮组件
e.currentTarget :当前的<view>组件


七、代码示例

这里我们借用阮一峰老师的代码示例
🧀我们通过代码来演示
🏀🏀🏀点击按钮替换名称

contact.html

<view ><text class="title">hello {{name}} </text><button  bindtap="buttonHandler" type="primary">按钮</button>
</view>

contact.js

Page({/*** 页面的初始数据*/data: {name: '张三'},buttonHandler(event) {this.setData({name: '李四'})}
})

点击前
在这里插入图片描述
点击后

在这里插入图片描述

1.函数前缀格式

<view ><text class="title">hello {{name}} </text><button  bindtap="buttonHandler" type="primary">按钮</button>
</view>

上面代码中,为按钮指定了触摸事件(tag)的回调函数buttonHandlerbind前缀表示这个回调函数会在冒泡阶段触发。

🍉🍉🍉注:其实我们可以加上:bindtap写为bind:tap

2.事件函数为全局数据赋值

 buttonHandler(event) {this.setData({name: '李四'})}

上述代码中,通过调用this.setData(dataObject)方法,可以给页面 data 中的数据重新赋值。

🍉🍉🍉注:修改页面配置对象的data属性时,不要直接修改this.data,这不仅无法触发事件绑定机制去改变页面,还会造成数据不一致,所以一定要通过this.setData()去修改。详情可以参考官方文档.

3.事件函数传参

小程序的时间传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数
小程序中使用data-* 自定义属性传参,*代表的是参数的名字
在js文件中通过event.target.dataset.参数名获得参数值
🧀我们通过代码来演示
🏀🏀🏀点击按钮通过事件传参,改变名称

contact.html

<view ><text class="title">hello {{name}} </text><button  bindtap="buttonHandler2" data-indo="{{3}}" type="primary">按钮</button>
</view>

contact.js

Page({/*** 页面的初始数据*/data: {name: '张三'},buttonHandler2(event) {this.setData({name: event.target.dataset.indo})}
})

点击之前
在这里插入图片描述
点击之后
在这里插入图片描述


八、bindinput语法格式

小程序中可以通过input事件来响应文本框的输入事件。

🧀我们通过代码来演示
🏀🏀🏀为文本框绑定输入事件

contact.hrml

<view >输入框<input bindinput="input"/>
</view>

contact.js

 input(e) {console.log(e.detail.value)},

🍉🍉🍉注:事件的event对象可以缩写为e
效果:
在这里插入图片描述


九、动态提示 Toast

小程序提供了很多组件和方法,满足用户的需求。有时候我们操作完毕后,需要一个动态提示告诉我们执行完毕,这种效果叫做Toast

🧀我们通过代码来演示
🏀🏀🏀点击按钮后,提示操作完成
contact.html

<view ><text class="title">hello {{name}} </text><button  bindtap="buttonHandler" type="primary">按钮</button>
</view>

contact.js

buttonHandler(event) {this.setData({name: '李四'}, function() {wx.showToast({title: '操作完成',duration: 700});})},

效果:
在这里插入图片描述
参数函数内部调用了wx.showToast()方法,wx是小程序的原生对象,包括所有客户端API。
wx.showToast()会展示微信内置的动态提示框,参数title属性指定提示内容,duration属性指定提示框的展示事件,单位为毫秒。

十、对话框 Modal

上面的动态提示 Toast展示点击按钮后提示“操作成功”,但是我们日常点击删除按钮时,需要我们再次确认,这种情况是怎么实现的呢?

🧀我们通过代码来演示
🏀🏀🏀点击按钮后,提示操作完成
contact.html

<view ><text class="title">hello {{name}} </text><button  bindtap="buttonHandler" type="primary">按钮</button>
</view>

contact.js

  buttonHandler(event) {const that = this;wx.showModal({title: '操作确认',content: '你确认要删除吗?',success (res) {      if (res.confirm) {that.setData({name: '李四'}, function () {wx.showToast({title: '操作完成',duration: 700});});} else if (res.cancel) {console.log('用户点击取消');}}});},

🍉🍉🍉注:

  • wx.showModal()方法的参数是一个配置对象。title表示提示框的标题,content属性表示提示框内容。success属性是提示框成功后显示的回调函数,fail属性时失败时回调函数。

  • success中需要判断一下用户点击的哪个按钮。confirm值为true表示是确定按钮,cancel的值为true表示是取消按钮。

  • 上面代码修改值写的是that.setData()。如果直接写this.setData()方法辉报错。这是因为setData()方法定义在页面实例上,由于success()函数不是直接定义在Page()的配置对象下,导致this不会指向页面实例,就会报错。想了解this关键字的详细解释,可以参考阮一峰老师文章.

效果:
点击前:
在这里插入图片描述
点击后
在这里插入图片描述
点击取消,我们发现内容没有改变,并且控制台输出“用户点击取消”
在这里插入图片描述
点击确认,名称发生了改变,提示"操作完成"
在这里插入图片描述


总结

以上就是今天要讲的内容,本文仅仅简单介绍了小程序事件绑定、动态提示Toast、对话框 Modal的使用,下一章我们将讲解如果请求后台获取数据

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

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

相关文章

2023年受人欢迎的低代码开发平台大盘点

随着企业对于降低成本和加快软件开发的需求增加&#xff0c;低代码开发平台逐渐成为一种受欢迎的选择。这些平台提供了拖放界面和预置组件&#xff0c;使得开发人员可以用更少的代码创建复杂的应用软件。低代码开发平台不仅有助于企业加速数字化转型&#xff0c;而且还能打破业…

URP基于GL的Unity物体网格线绘制方法参考

直接上代码&#xff1a; using System; using System.Collections.Generic; using UnityEngine; using UnityEngine.Rendering;public class GLWireMesh : MonoBehaviour {[Serializable]public class IntPair{public int a;public int b;public IntPair(int a, int b){this.a…

Linux系统管理:虚拟机Rocky Linux安装

目录 一、理论 1.Rocky Linux 2.NetworkManager配置 3.ipaddress 配置文件 4.nmtui 配置 ipaddress 二、实验 1.虚拟机Rocky Linux安装准备阶段 2.安装Rocky Linux 3.进入系统 三、问题 1.网络配置文件权限不够 一、理论 1.Rocky Linux &#xff08;1&#xff0…

下载的谷歌模型如何转为3dtiles

收费工具&#xff0c;学生党勿扰 收费金额1000元 已经购买过工具的大佬&#xff0c;可以免费更新 1 概述 上个月&#xff0c;写了一篇<<谷歌地图模型自动下载>>的文章&#xff0c;效果还不错&#xff0c;能够帮到一些同学。 但是&#xff0c;随着谷歌模型下载的越…

uniapp开发微信小程序--自定义顶部导航栏

一、实现效果&#xff1a; 二、代码实现&#xff1a; 1.在pages.json文件中&#xff0c;单页面定义导航栏&#xff0c;添加以下代码&#xff1a; "navigationStyle": "custom" //自定义导航栏如图所示&#xff1a; 2.在components文件夹下&#xff0c;…

使用多数据源dynamic-datasource-spring-boot-starter遇到的问题记录

记录使用多数据源dynamic-datasource-spring-boot-starter遇到的问题&#xff1a; 1、工程启动失败 缺少clickhouse连接驱动&#xff0c;引入对应的maven依赖 <!--ck连接驱动--><dependency><groupId>ru.yandex.clickhouse</groupId><artifactId>…

Kylin v10基于cephadm工具离线部署ceph分布式存储

1. 环境&#xff1a; ceph&#xff1a;octopus OS&#xff1a;Kylin-Server-V10_U1-Release-Build02-20210824-GFB-x86_64、CentOS Linux release 7.9.2009 2. ceph和cephadm 2.1 ceph简介 Ceph可用于向云平台提供对象存储、块设备服务和文件系统。所有Ceph存储集群部署都从…

制作crate并发布到Crates.io

准备 发布 crate 时, 一旦发布无法修改,无法覆盖, 因此要注意邮箱等一些个人信息 访问crates.io 的 帐号设定页面[1],生成Token 并在命令行 执行 cargo login your token 此命令将告诉 Cargo 你的 API 令牌, 并将其存储在本地 ~/.cargo/credentials crates.io 上crate的名字, 会…

生成测试报告就万事大吉了吗?NO,升职加薪就差这一步啦!- 04(非常详细,非常实用)

简介 上一篇生成测试报告&#xff0c;小伙伴们和童鞋们就又问道&#xff0c;测试报告已经生成了&#xff0c;怎么发送给相关的负责人了&#xff1f;小伙伴们和童鞋们不要着急&#xff0c;慢慢给你道来&#xff0c;心急吃不了热豆腐哈。这些小伙伴们的表现还是不错的&#xff0c…

安装nvm之后,node -v 提示‘node‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件

1. 检查有没有执行这个命令&#xff1a;nvm use [nodejs version name] 2. 检查nvm安装位置同级&#xff0c;有没有nodejs文件夹&#xff0c;是一个快捷键&#xff01;如果有一个其他的nodejs&#xff0c;把它删掉&#xff0c;然后到cmd中&#xff0c;重新nvm install一下&…

【计算机网络】应用层协议 -- 安全的HTTPS协议

文章目录 1. 认识HTTPS2. 使用HTTPS加密的必要性3. 常见的加密方式3.1 对称加密3.2 非对称加密3.3 非对称加密对称加密 4. 引入CA证书4.1 CA认证4.2 数据签名4.3 非对称机密对称加密证书认证4.4 常见问题 5. 总结 1. 认识HTTPS HTTPS全称为 Hyper Text Tranfer Protocol over …

API教程:轻松上手HTTP代理服务!

作为HTTP代理产品供应商&#xff0c;我们为您带来一份详细的教程&#xff0c;帮助您轻松上手使用API&#xff0c;并充分利用HTTP代理服务。无论您是开发人员、网络管理员还是普通用户&#xff0c;本教程将为您提供操作指南和代码模板&#xff0c;确保您能够顺利使用API并享受HT…

【深度学习】Inst-Inpaint: Instructing to Remove Objects with Diffusion Models,指令式图像修复

论文&#xff1a;https://arxiv.org/abs/2304.03246 code:http://instinpaint.abyildirim.com/ 文章目录 AbstractIntroductionRelated WorkDataset GenerationMethodPS Abstract 图像修复任务是指从图像中擦除不需要的像素&#xff0c;并以语义一致且逼真的方式填充它们。传统…

SQL项目实战:银行客户分析

大家好&#xff0c;本文将与大家分享一个SQL项目&#xff0c;即根据从数据集收集到的信息分析银行客户流失的可能性。这些洞察来自个人信息&#xff0c;如年龄、性别、收入和人口统计信息、银行卡类型、产品、客户信用评分以及客户在银行的服务时间长短等。对于银行而言&#x…

使用DeferredResult来设计异步接口

文章目录 DeferredResult 介绍思路Demo搭建1.定义一个抽象的请求体2.定义一个接口返回体3.定义一个接口请求体继承抽象类AsynTaskBaseRequest<T<T>>4.定义seveice类&#xff0c;并声明一个异步方法&#xff08;Async注解&#xff09;5.定义一个返回DeferredResult的…

Chrome浏览器中的vue插件devtools的下载方式(使用Chrome应用商店/科学上网情况下)

目录 devtools对前端来说的好处——开发预览、远程调试、性能调优、Bug跟踪、断点调试等 下载步骤&#xff1a; 测试阶段&#xff1a; 最近做项目要使用devtools这个vue插件。 devtools对前端来说的好处——开发预览、远程调试、性能调优、Bug跟踪、断点调试等 下载步骤…

【云原生】Serverless 技术架构分析

一、什么是Serverless? 1、Serverless技术简介 ​ Serverless&#xff08;无服务器架构&#xff09;指的是由开发者实现的服务端逻辑运行在无状态的计算容器中&#xff0c;它由事件触发&#xff0c; 完全被第三方管理&#xff0c;其业务层面的状态则被开发者使用的数据库和存…

基于小程序+spring boot流浪动物救助系统-计算机毕设 附源码12783

小程序spring boot流浪动物救助系统 摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;流浪动物救助系统被用…

C# 中使用ValueTask优化异步方法

概要 我们在开发过程中&#xff0c;经常使用async的异步方法&#xff0c;但是有些时候&#xff0c;异步的方法中&#xff0c;可能包含一些同步的处理。本文主要介绍通过ValueTask这个struct&#xff0c;优化异步处理的方法性能。 代码及实现 有些时候我们会缓存一些数据在内…

Vue+Element Plus 初始化

1. 初始化 Vue 项目 创建vue3 项目 vue create k8s-platform-fe 2. 引入 Element Plus 安装 element-plus 首先去安装这些依赖包&#xff0c;安装好了将其引入&#xff0c;引入的方式有全局引用和局部引入。其实和组件是一样的&#xff0c;局部引入哪里引入哪里使用。…