一、 事件
什么是事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息,如 id, dataset, touches。
事件分类
- 事件分为冒泡事件和非冒泡事件:
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。(eg:
bindtap
) - 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。(eg:
catchtap
)
- 普通事件绑定(冒泡事件)————事件绑定的写法类似于组件的属性,如:
<view bindtap="handleTap">
Click here!
</view>
如果用户点击这个 view ,则页面的 handleTap 会被调用。
- 绑定并阻止事件冒泡————除 bind 外,也可以用 catch 来绑定事件。
与 bind 不同,catch 会阻止事件向上冒泡
。
例如在下边这个例子中,点击 inner view 会先后调用handleTap3和handleTap2
(因为tap事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),
点击 middle view 会触发handleTap2,点击 outer view 会触发handleTap1。
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
注:
如果有弹出层,要阻止冒泡,否则会穿透。
dataset
- 在组件节点中可以附加一些自定义数据。这样,在事件中可以获取这些自定义的节点数据,用于事件的逻辑处理。
- 在 WXML 中,这些自定义数据以 data- 开头,多个单词由连字符 - 连接。
- 这种写法中,
连字符写法会转换成驼峰写法
,而大写字符会自动转成小写字符
。如:
data-element-type
,最终会呈现为 event.currentTarget.dataset.elementType
data-elementType
,最终会呈现为 event.currentTarget.dataset.elementtype
- 示例:
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({
bindViewTap:function(event){
event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
}
})
点击事件和自定义数据主要用于:点击事件时获取数据
比如:有for循环时,获取index
<view wx:for="{{needData.val}}" wx:key="index" class="dialog-item {{index==needData.toValIndex?'selectedItem':''}}" data-dialogid="{{index}}" catchtap="getValueTap">{{item}}</view>
一、 路由跳转
注意事项
- navigateTo, redirectTo 只能打开非 tabBar 页面。
- switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
- 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的onLoad中获取。
上面是文档内容
路由
//跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.switchTab({
url: '/index'
})
//关闭所有页面,打开到应用内的某个页面
wx.reLaunch({
url: 'test?id=1'
})
//关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.redirectTo({
url: 'test?id=1'
})
//保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
//使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
wx.navigateTo({
url: 'test?id=1',
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
//关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。
// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
delta: 2
})
获取跳转路由携带的参数
wx.reLaunch({
url: 'test?id=1'
})
// test
Page({
onLoad (option) {
console.log(option.id)
}
})