### 事件綁定和冒泡
事件綁定的寫法同組件的屬性,以 key、value 的形式。
* key 以bind或catch開頭,然后跟上事件的類型,如bindtap、catchtouchstart。自基礎庫版本 1.5.0 起,bind和catch后可以緊跟一個冒號,其含義不變,如bind:tap、、catch:touchstart。
* value 是一個字符串,需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。
* 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>
~~~
### 頁面跳轉
`wx.navigateTo(OBJECT)`
保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。
|參數 | 類型 |必填 |說明|
|---|---|---|---|
|url | String | 是| 需要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔,參數鍵與參數值用=相連,不同參數用&分隔;如 'path?key=value&key2=value2'|
|success | Function |否| 接口調用成功的回調函數|
|fail |Function | 否 |接口調用失敗的回調函數|
|complete| Function |否 |接口調用結束的回調函數(調用成功、失敗都會執行)|
示例代碼:
~~~javascript
wx.navigateTo({
url: 'test?id=1'
})
//test.js
Page({
onLoad: function(option){
console.log(option.query)
}
})
~~~
> 注意:目前頁面路徑最多只能十層。
`wx.redirectTo(OBJECT)`
關閉當前頁面,跳轉到應用內的某個頁面。
|參數 | 類型 |必填 | 說明|
|---|---|---|---|
|url |String| 是 |需要跳轉的應用內非 tabBar 的頁面的路徑,路徑后可以帶參數。參數與路徑之間使用?分隔,參數鍵與參數值用=相連,不同參數用&分隔;如 'path?key=value&key2=value2'|
|success | Function| 否 |接口調用成功的回調函數|
|fail | Function | 否 |接口調用失敗的回調函數|
|complete |Function |否 | 接口調用結束的回調函數(調用成功、失敗都會執行)|
示例代碼:
~~~javascript
wx.redirectTo({
url: 'test?id=1'
})
~~~
`welcome.js`
~~~javascript
onTap:function(){
//跳轉并且可以返回原來的頁面
// wx.navigateTo({
// url:"../posts/post"
// })
// wx.redirectTo({
// url: '../posts/post',
// })
console.log('onTap');
},
onTextTap:function(){
console.log('onTextTap');
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
console.log('unload');
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
console.log('unhide');
},
~~~