本節學習目標
- 點擊事件(click)
- 長按手勢(longpress)
- appear 出現事件
- Disappear 消失事件
- viewappear 事件
- viewdisappear 事件
接下來我們一個一個介紹
- 點擊事件
click
示例如下
<div @click="tap">默認參數</div>
<div @click="tap('你好')" >傳遞常量參數<div>
<div @click="tap(index)" >傳遞變量參數<div>
<div @click="tap(index,value)" >傳遞多個參數<div>
如上示例中定義的單擊事件方法tap中,如果不傳遞參數,即使用默認參數的情況,系統會自動傳遞如下對象當成方法的參數
type: click
target: 觸發點擊事件的目標組件
timestamp: 觸發點擊事件時的時間戳
...
部分參數截圖
其實<div @click="tap">默認參數</div> 的完整寫法為`<div @click="tap($event)">默認參數</div>``
?思考:如果你既要傳遞自己的參數,又要保留系統參數,應該怎么寫?
@longpress="longpress(index,$event)"
- 長按事件
longpress
<div @longpress="longpress(index)"></div>
<div @longpress="longpress"></div>
longpress事件默認參數為
type : longpress
target : 觸發長按事件的目標組件
timestamp : 長按事件觸發時的時間戳
...
參數用法同上
- appear 事件
appear
給組件綁定appear事件,那么當這個組件出現在屏幕上時，該事件將被觸發
示例
<text class="text" v-if="index==25" @appear="appear(index)">綁定了appear</text>
事件參數
type : appear
target : 觸發 Appear 事件的組件對象
timestamp : 事件被觸發時的時間戳
direction : 觸發事件時屏幕的滾動方向，up 或 down
...
-
disappear事件
disappear
當一個組件綁定了 disappear
事件，那么當這個組件被滑出屏幕變為不可見狀態時，該事件將被觸發。
事件對象
type : disappear
target : 觸發 Disappear 事件的組件對象
timestamp : 事件被觸發時的時間戳
direction : 觸發事件時屏幕的滾動方向，up 或 down
示例如下
<text class="text" v-else-if="index==3" @disappear="disappear(index)">綁定disappear</text>
- viewappear事件
viewappear
該事件將會在打開新頁面時被觸發(如push一個新的頁面)
該事件必須綁定在根節點上如下
<template>
<div class="page" @viewappear="viewappear" @viewdisappear='viewdisappear'>
</div>
</template>
事件對象
type : viewappear
target : 觸發事件的組件對象
timestamp : 事件被觸發時的時間戳
...
- viewdisappear
viewdisappear
該事件將會在頁面關閉時觸發(如pop)
該事件也必須綁定在根節點上
<template>
<div class="page" @viewdisappear='viewdisappear'>
</div>
</template>
事件對象
type : viewdisappear
target : 觸發事件的組件對象
timestamp : 事件被觸發時的時間戳
注意事項
- <input> 和 <switch> 組件 不支持click或者longpress 事件,事件 請使用 change 或 input 事件來代替
- H5 不支持 viewdisappear 和 viewappear
簡單的使用就介紹到這里
