Home  >  Article  >  WeChat Applet  >  Three types of event sample codes for WeChat mini programs

Three types of event sample codes for WeChat mini programs

高洛峰
高洛峰Original
2017-02-27 14:38:192334browse

本文主要介绍一下微信小程序中的三类事件,并用代码给出示范。

小程序的事件主要有三种类型:
1-单击事件

2-双击事件

3-长按事件

单击事件由touchstart、touchend组成,touchend后触发tap事件。
(1)单击事件

view代码

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>

JS代码

mytouchstart: function(e){  
  console.log(e.timeStamp + &#39;- touch start&#39;)
},mytouchend: function(e){
   console.log(e.timeStamp + &#39;- touch end&#39;)
},mytap: function(e){  
  console.log(e.timeStamp + &#39;- tap&#39;)
}

这里通过bindtouchstart函数绑定了触摸开始的事件,bindtouchend函数绑定了触摸结束时触发的事件。
并可以在js代码中去实现这两个事件函数的内容。

(2)双击事件

双击事件由两个单击事件组成,两次间隔时间小于300ms认为是双击;微信官方文档没有双击事件,需要开发者自己定义处理。
view


点我吧 

JS代码

Three types of event sample codes for WeChat mini programs

(3)长按

长按事件手指触摸后,超过350ms再离开。
view代码

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap"
    bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>

JS代码

mytouchstart: function(e){   
 console.log(e.timeStamp + &#39;- touch start&#39;)
},
//长按事件
mylongtap: function(e){   
 console.log(e.timeStamp + &#39;- long tap&#39;)
},
 console.log(e.timeStamp + &#39;- touch end&#39;)
},
mytap: function(e){   
 console.log(e.timeStamp + &#39;- tap&#39;)
}


更多Three types of event sample codes for WeChat mini programs相关文章请关注PHP中文网!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn