微信小程序中的事件绑定
前言:
微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的。
js代码:
// 页面级的js文件必须调用Page函数来注册页面,
// 否则你的页面将无法正常渲染 Page({
parent() {
console.log('parent')
},
father() {
console.log('father')
},
son() {
console.log('son')
}
})
wxss代码: (也就是对应的样式)
.parent{
width: 500rpx;
height: 500rpx;
background-color: red;
margin-bottom: 20rpx;
} .father{
width: 300rpx;
height: 300rpx;
background-color: pink;
} .son{
width: 100rpx;
height: 100rpx;
background-color: yellow;
}
wxml代码:
<!-- bind绑定的事件具有 事件冒泡 -->
<view class="parent" bind:tap="parent">
<view class="father" bind:tap="father">
<view class="son" bind:tap="son"></view>
</view>
</view> <!-- catch绑定的事件会阻止事件的冒泡 -->
<view class="parent" catch:tap="parent">
<view class="father" catch:tap="father">
<view class="son" catch:tap="son"></view>
</view>
</view> <!-- capture-bind 绑定的事件具有 事件捕获 -->
<view class="parent" capture-bind:tap="parent">
<view class="father" capture-bind:tap="father">
<view class="son" capture-bind:tap="son"></view>
</view>
</view> <!-- capture-catch 绑定的事件会阻止事件捕获 -->
<!-- 但是这样的话,在内部嵌套的元素永远无法触发对应的事件处理函数 -->
<view class="parent" capture-catch:tap="parent">
<view class="father" capture-catch:tap="father">
<view class="son" capture-catch:tap="son"></view>
</view>
</view> <!-- mut-bind绑定的事件具有 互斥效果,即"有我没你"的感觉 -->
<view class="parent" mut-bind:tap="parent">
<view class="father" mut-bind:tap="father">
<view class="son" mut-bind:tap="son"></view>
</view>
</view>
总结:
- 一般开发中的话用的比较多的是前两种
- 如果会Vue中的指令的话,入手会很快
微信小程序中的事件绑定的更多相关文章
- 微信小程序之bindtap事件绑定传参
wxml代码: <view class='fen'> <text bindtap='prev' data-page="{{pageDang}}">上一页&l ...
- 微信小程序中的事件
事件 说明 bindtap bindload 当图片载入完毕时触发,event.detail = {height, width} bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒 ...
- 微信小程序开发 [03] 事件、数据绑定和传递
1.事件绑定 在微信小程序中,事件的绑定依附于组件,当事件触发时,就会执行事件对应的处理函数. 我们回到前几章中的例子,将index页面调整为首页(app.json中调整pages数组元素的顺序),此 ...
- 微信小程序中事件
微信小程序中事件 一.常见的事件有 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 ...
- 微信小程序中,如何阻止多次点击单击事件
在微信小程序中,有自制对话框用于提交数据,但是会出现用户连续点击,多次提交数据的情况. //.wxml <view class="acertain" bindtap=&quo ...
- 全栈开发工程师微信小程序-中(中)
全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...
- 全栈开发工程师微信小程序-中
全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...
- 微信小程序中target与currentTarget
target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...
- 微信小程序中登录操作-----与-----引用
login.wxml <view> <!-- <image src="./88.png"></image> --> # 在当前目录下 ...
随机推荐
- PHP安装之configure的配置参数
1.生成环境安装配置如下 要求安装如下库: imagickgdmysqlmysqlimysqlndphalconPharsoapsocketsxwebxsvczipzlib 具体查看 vim php- ...
- P1041 传染病控制——暴力遍历所有相同深度的节点
P1041 传染病控制 说实话这种暴力我还是头一次见,每次病毒都会往下传染一层: 数据范围小,我们可以直接枚举当前层保护谁就好了: 用vector 记录相同层数的节点:维护已经断了的点: 如果超出最底 ...
- mysql 统计查询出来的数目
select count(*) as dd from users;
- 深入理解JVM虚拟机10:JVM常用参数以及调优实践
转自http://www.rowkey.me/blog/2016/11/02/java-profile/?hmsr=toutiao.io&utm_medium=toutiao.io&u ...
- 2018-2019-2 网络对抗技术 20165212 Exp 8 Web基础
2018-2019-2 网络对抗技术 20165212 Exp 8 Web基础 原理与实践说明 1.实践内容概述 1.Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GE ...
- CORS & CSP笔记
1.CORS & CSP 浏览器跨域相关的安全策略主要存在于两个方面: 浏览器是否发送ajax 浏览器是否加载返回数据 假设从a.com 向b.com发送ajax请求.此时浏览器当前页面为a. ...
- 第十六周助教工作总结——NWNU李泓毅
助教博客链接:https://www.cnblogs.com/NWNU-LHY/ 本次作业的要求:团队项目设计完善&编码:https://www.cnblogs.com/nwnu-daizh/ ...
- pyinstaller参数介绍以及总结
最近利用tkinter+python+pyinstaller实现了小工具的项目,在此记录下pyinstaller相关参数以及爬过的坑. 一.pyinstaller相关参数 -F, –onefile 打 ...
- html5中progress/meter元素
html5中progress/meter元素 一.总结 一句话总结: progress元素:用来建立一个进度条 meter元素的作用:用来建立一个度量条,用来表示度量衡的评定 <progress ...
- Java查询目录下的所有文件(包括子目录)
目录图: 方法代码: /** * 读取目录下的所有文件 * * @param dir * 目录 * @param fileNames * 保存文件名的集合 * @return */ public st ...