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


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 相关文章推荐
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
微信小程序 数据绑定及运算的简单实例
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
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
Python最长公共子串算法实例
2015/03/07 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
对python中return和print的一些理解
2017/08/18 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
python实现简单登陆系统
2018/10/18 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
基于Python fminunc 的替代方法
2020/02/29 Python
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
计算机专业推荐信范文
2013/11/27 职场文书
小学开学标语
2014/07/01 职场文书
体育课外活动总结
2014/07/08 职场文书
实习协议书范本
2014/09/25 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
关于军训的感想
2015/08/07 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android