网站seo策划方案案例分析,网站建设服装在线商城实训报告,舟山城乡建设部网站首页,做技术网站赚钱【微信小程序创作之路】- 小程序事件绑定、动态提示Toast、对话框 Modal
第六章 小程序事件绑定、动态提示Toast、对话框 Modal 文章目录 【微信小程序创作之路】- 小程序事件绑定、动态提示Toast、对话框 Modal前言一、事件是什么#xff1f;二、小程序中常用事件三、事件传…【微信小程序创作之路】- 小程序事件绑定、动态提示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。
我们通过代码来演示 通过两个元素来看触发几次
divp点击/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接着依次是document、html、document.documentElement和bodydocument.body。也就是说上例的事件传播顺序在捕获阶段依次为window、document、html、body、div、p在冒泡阶段依次为p、div、body、html、document、window。 四、指定回调函数阶段
小程序可以通过属性指定各种事件的回调函数并且可以指定在哪个阶段触发回调函数。
类型事件描述capture-bind捕获阶段触发。capture-catch捕获阶段触发并中断事件不再向下传播即中断捕获阶段并取消随后的冒泡阶段。bind冒泡阶段触发。catch冒泡阶段触发并取消事件进一步向上冒泡。 五、event事件对象属性
详细属性列表如下
属性类型事件描述typeString事件类型timeStampInteger事件生成时的时间戳targetObject触发事件的组件的一些属性值集合currentTargetObject当前组件的一些属性值集合markObject事件标记数据detailObject额外的信息touchesArray触摸事件当前停留在屏幕中的触摸点信息的数组changedTouchesArray触摸事件当前变化的触摸点信息的数组 六、target和currentTarget的区别
target触发事件的源头组件。 currentTarget当前事件所绑定的组件
我们通过代码来演示 通过代码来区分一下
view text classtitlehello /textbutton bindtapbuttonHandler typeprimary按钮/button
/viewjs文件
buttonHandler(event) {console.log(event ,event);console.log(源头组件 ,event.target);console.log(当前事件所绑定的组件 ,event.target);},输出结果 分析结果 e.target内部button按钮组件 e.currentTarget 当前的view组件 七、代码示例
这里我们借用阮一峰老师的代码示例 我们通过代码来演示 点击按钮替换名称
contact.html
view text classtitlehello {{name}} /textbutton bindtapbuttonHandler typeprimary按钮/button
/viewcontact.js
Page({/*** 页面的初始数据*/data: {name: 张三},buttonHandler(event) {this.setData({name: 李四})}
})点击前 点击后 1.函数前缀格式
view text classtitlehello {{name}} /textbutton bindtapbuttonHandler typeprimary按钮/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 classtitlehello {{name}} /textbutton bindtapbuttonHandler2 data-indo{{3}} typeprimary按钮/button
/viewcontact.js
Page({/*** 页面的初始数据*/data: {name: 张三},buttonHandler2(event) {this.setData({name: event.target.dataset.indo})}
})点击之前 点击之后 八、bindinput语法格式
小程序中可以通过input事件来响应文本框的输入事件。
我们通过代码来演示 为文本框绑定输入事件
contact.hrml
view 输入框input bindinputinput/
/viewcontact.js input(e) {console.log(e.detail.value)},注事件的event对象可以缩写为e 效果 九、动态提示 Toast
小程序提供了很多组件和方法满足用户的需求。有时候我们操作完毕后需要一个动态提示告诉我们执行完毕这种效果叫做Toast。
我们通过代码来演示 点击按钮后提示操作完成 contact.html
view text classtitlehello {{name}} /textbutton bindtapbuttonHandler typeprimary按钮/button
/viewcontact.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 classtitlehello {{name}} /textbutton bindtapbuttonHandler typeprimary按钮/button
/viewcontact.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的使用下一章我们将讲解如果请求后台获取数据。
