uni-app 事件

时间:2022-07-20 18:08:05

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>