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


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 相关文章推荐
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
JavaScript多种图形实现代码实例
Jun 28 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写日志的实现方法
2014/11/05 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python循环语句之break与continue的用法
2015/10/14 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
竞聘书格式及范文
2014/03/31 职场文书
成绩单公证书
2014/04/10 职场文书
律师授权委托书范本
2014/10/07 职场文书
公司离职证明标准格式
2014/11/18 职场文书
个人创业事迹材料
2014/12/30 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
浅谈pytorch中的dropout的概率p
2021/05/27 Python
Pygame Draw绘图函数的具体使用
2021/11/17 Python