uni-app,經常使用事件

經常使用事件

  

 1 <template>
 2     <view>
 3         <view style="width: 100%; height: 150upx;"></view>    
 4 
 5         <input type="text" :value="title"
 6  style="background-color: #007AFF;height: 100upx"
 7  @input="change"
 8         
 9  @focus="focus"
10 
11  @blur="blur"
12         
13  @confirm="confirm"
14         
15  @click="click"
16         
17  @tap="tap"
18         
19  @longpress="longpress"
20         
21  @touchstart="touchstart"
22         
23  @touchend="touchend"
24                     
25  @touchmove="touchmove"
26                     
27  @touchcancel="touchcancel"            
28         />
29         <!-- 不推薦使用了, 請使用 longpress @longtap="longtap" -->
30     </view>
31 </template>
32 
33 <script>
34  export default { 35  data() { 36             return { 37                 
38  } 39  }, 40  methods: { 41  change(){ 42  console.log("輸入框改變") 43  }, 44  focus(){ 45  console.log("得到焦點") 46  }, 47  blur(){ 48  console.log("失去焦點") 49  }, 50  confirm(){ 51  console.log("點擊完成按鈕/回車鍵") 52  }, 53             // 使用時 tap 和 click 只使用一個就好 
54  click(){ 55  console.log("單擊事件") 56  }, 57  tap(){ 58  console.log("組件被觸摸") 59  }, 60  longpress(){ 61  console.log("長時間按壓") 62  }, 63             //不推薦使用,請使用longpress
64             // longtap(){
65             // console.log("長時間觸摸")
66             // }
67  touchstart(){ 68  console.log("觸摸開始") 69  }, 70  touchend(){ 71  console.log("觸摸結束") 72  }, 73  touchmove(){ 74  console.log("手指移動") 75  }, 76             //如打進電話, (暫時沒法演示)
77  touchcancel(){ 78  console.log("觸摸被打斷") 79  } 80  } 81  } 82 </script>
83 
84 <style>
85 
86 </style>

 

@click 和 @tap 只是用一個spa

@longtap 不推薦使用, 儘可能使用longpress code

相關文章
相關標籤/搜索