微信小程序 页面跳转事件绑定的实例详解


Posted in Javascript onSeptember 20, 2017

微信小程序 页面跳转事件绑定的实例详解

什么是事件

  1. 事件是视图层到逻辑层的通讯方式。
  2. 事件可以将用户的行为反馈到逻辑层进行处理。
  3. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
  4. 事件对象可以携带额外信息,如 id, dataset, touches。

在组件中绑定一个事件处理函数。

如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数

<view bindtap="view">
    <text bindtap="toast" class="journey">开启小程序之旅   </text>
 </view>

子元素触发父级元素也会触发若要只触发子元素使用catchtap代替bindtap

在相应的Page定义中写上相应的事件处理函数,参数是event。

Page({
 toast: function (event) {
  // wx.navigateTo({
  //  url: '../redirect/redirect'
  // });


  wx.redirectTo({
   url: '../redirect/redirect',
  });
  // view:function(event){
  //  // 父级元素
  // }

 },
 /**
   * 生命周期函数--监听页面隐藏/并未关闭返回
   */
 onHide: function (event) {
   console.log(event)
 },

 /**
  * 生命周期函数--监听页面卸载/
  */
 onUnload: function () {
  console.log(222)
 },
})

事件分类

冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。

非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

WXML的冒泡事件列表:

类型 触发条件
touchstart 手指触摸动作开始
touchmove  手指触摸后移动
touchcancel 手指触摸动作被打断,如来电提醒,弹窗
touchend  手指触摸动作结束
tap 手指触摸后马上离开
longtap 手指触摸后,超过350ms再离开

:除上表之外的其他组件自定义事件如无特殊申明都是非冒泡事件,如<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件,(详见各个组件官方文档)

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
js闭包的用途详解
Nov 09 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
继续学习javascript闭包
Dec 03 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
基于vue.js实现购物车
Jan 15 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 #Javascript
Angularjs使用过滤器完成排序功能
Sep 20 #Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 #Javascript
node+koa实现数据mock接口的方法
Sep 20 #Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 #Javascript
ES6中Array.includes()函数的用法
Sep 20 #Javascript
微信小程序视图template模板引用的实例详解
Sep 20 #Javascript
You might like
php 归并排序 数组交集
2011/05/10 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
php导出生成word的方法
2015/12/25 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
Javascript之String对象详解
2016/06/08 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
Python中的整除和取模实例
2020/06/03 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
行政文员岗位职责
2013/11/08 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
运动会口号16字
2014/06/07 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers