Detailed explanation of WeChat applet page jump event binding examples

This article mainly introduces relevant information to you about the detailed examples of WeChat mini program page jump event binding. I hope that through this article, you can understand and apply the examples of mini program page jump and event binding. Friends who need it can refer to the following , hope it can help everyone.

Detailed explanation of examples of WeChat applet page jump event binding

What are events

1. Events are from the view layer to the logic layer communication method.

2. Events can feed back user behavior to the logic layer for processing.

3. Events can be bound to components. When the trigger event is reached, the corresponding event processing function in the logic layer will be executed.

4. Event objects can carry additional information, such as id, dataset, touches.
   

Bind an event handling function to the component.

For example, bindtap, when the user clicks on the component, the corresponding event processing function will be found in the corresponding Page of the page.

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

The child element also triggers the parent element. Will trigger If you want to trigger only child elements, use catchtap instead of bindtap

Write the corresponding event processing function in the corresponding Page definition, and the parameter is 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)
 },
})

Event classification

Bubble event: When an event on a component is triggered, the event will be passed to the parent node.

Non-bubbling events: When an event on a component is triggered, the event will not be delivered to the parent node.

WXML bubbling event list:

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

Note: In addition to the above table, other component custom events are non-bubbling events unless otherwise specified, such as The submit event of

, the input event of , the scroll event of (see the official documentation of each component for details)

Related Recommended:

htmlHow to pass parameters when page jumps

Router solves cross-module page jumps

vue realizes that the page jumps to the previous page after logging in. Example sharing

The above is the detailed content of Detailed explanation of WeChat applet page jump event binding examples. For more information, please follow other related articles on the PHP Chinese website!