本節(jié)學(xué)習(xí)目標(biāo)
- 點(diǎn)擊事件(click)
- 長(zhǎng)按手勢(shì)(longpress)
- appear 出現(xiàn)事件
- Disappear 消失事件
- viewappear 事件
- viewdisappear 事件
接下來(lái)我們一個(gè)一個(gè)介紹
- 點(diǎn)擊事件
click
示例如下
<div @click="tap">默認(rèn)參數(shù)</div>
<div @click="tap('你好')" >傳遞常量參數(shù)<div>
<div @click="tap(index)" >傳遞變量參數(shù)<div>
<div @click="tap(index,value)" >傳遞多個(gè)參數(shù)<div>
如上示例中定義的單擊事件方法tap中,如果不傳遞參數(shù),即使用默認(rèn)參數(shù)的情況,系統(tǒng)會(huì)自動(dòng)傳遞如下對(duì)象當(dāng)成方法的參數(shù)
type: click
target: 觸發(fā)點(diǎn)擊事件的目標(biāo)組件
timestamp: 觸發(fā)點(diǎn)擊事件時(shí)的時(shí)間戳
...
部分參數(shù)截圖
其實(shí)<div @click="tap">默認(rèn)參數(shù)</div> 的完整寫(xiě)法為`<div @click="tap($event)">默認(rèn)參數(shù)</div>``
?思考:如果你既要傳遞自己的參數(shù),又要保留系統(tǒng)參數(shù),應(yīng)該怎么寫(xiě)?
@longpress="longpress(index,$event)"
- 長(zhǎng)按事件
longpress
<div @longpress="longpress(index)"></div>
<div @longpress="longpress"></div>
longpress事件默認(rèn)參數(shù)為
type : longpress
target : 觸發(fā)長(zhǎng)按事件的目標(biāo)組件
timestamp : 長(zhǎng)按事件觸發(fā)時(shí)的時(shí)間戳
...
參數(shù)用法同上
- appear 事件
appear
給組件綁定appear事件,那么當(dāng)這個(gè)組件出現(xiàn)在屏幕上時(shí)，該事件將被觸發(fā)
示例
<text class="text" v-if="index==25" @appear="appear(index)">綁定了appear</text>
事件參數(shù)
type : appear
target : 觸發(fā) Appear 事件的組件對(duì)象
timestamp : 事件被觸發(fā)時(shí)的時(shí)間戳
direction : 觸發(fā)事件時(shí)屏幕的滾動(dòng)方向幢尚，up 或 down
...
-
disappear事件
disappear
當(dāng)一個(gè)組件綁定了 disappear
事件沧侥，那么當(dāng)這個(gè)組件被滑出屏幕變?yōu)椴豢梢?jiàn)狀態(tài)時(shí)铡溪，該事件將被觸發(fā)。
事件對(duì)象
type : disappear
target : 觸發(fā) Disappear 事件的組件對(duì)象
timestamp : 事件被觸發(fā)時(shí)的時(shí)間戳
direction : 觸發(fā)事件時(shí)屏幕的滾動(dòng)方向饺鹃，up 或 down
示例如下
<text class="text" v-else-if="index==3" @disappear="disappear(index)">綁定disappear</text>
- viewappear事件
viewappear
該事件將會(huì)在打開(kāi)新頁(yè)面時(shí)被觸發(fā)(如push一個(gè)新的頁(yè)面)
該事件必須綁定在根節(jié)點(diǎn)上如下
<template>
<div class="page" @viewappear="viewappear" @viewdisappear='viewdisappear'>
</div>
</template>
事件對(duì)象
type : viewappear
target : 觸發(fā)事件的組件對(duì)象
timestamp : 事件被觸發(fā)時(shí)的時(shí)間戳
...
- viewdisappear
viewdisappear
該事件將會(huì)在頁(yè)面關(guān)閉時(shí)觸發(fā)(如pop)
該事件也必須綁定在根節(jié)點(diǎn)上
<template>
<div class="page" @viewdisappear='viewdisappear'>
</div>
</template>
事件對(duì)象
type : viewdisappear
target : 觸發(fā)事件的組件對(duì)象
timestamp : 事件被觸發(fā)時(shí)的時(shí)間戳
注意事項(xiàng)
- <input> 和 <switch> 組件 不支持click或者longpress 事件,事件 請(qǐng)使用 change 或 input 事件來(lái)代替
- H5 不支持 viewdisappear 和 viewappear
簡(jiǎn)單的使用就介紹到這里
