赞
踩
对于同一控件同时设置@tap和@longpress,会发现长按时先出现@longpress的事件,然后触发点击事件tap。
通过测试,我们发现,小程序中事件执行的顺序是
点击:touchstart → touchend → tap
长按 touchstart → longpress → touchend → tap
- <view
- v-else
- class="posterImg"
- @touchstart="bindTouchStart"
- @touchend="bindTouchEnd"
- @longpress="bingLongTap"
- @tap="bindTap"
- >
- <image
- :src="posterImgUrl"
- show-menu-by-longpress="true"
- mode="aspectFit"
- style="width: 100vw; height: 100vh"
- />
- </view>
- touchstart(e) {
- this.startTime = e.timeStamp;
- }
- touchend(e) {
- this.endTime = e.timeStamp;
- }
- tap(e) {
- if(this.endTime - this.startTime < 350) {
- console.log("点击")
- }
- }
- longpress(e) {
- console.log("长按");
- }
- data(){
- return {
- lock: false,
- }
- }
- touchend(e) {
- if(this.lock) {
- setTimeout(()=>{
- this.lock = false;
- }, 200)
- }
-
- }
- tap(e) {
- if(this.lock) return;
- console.log("点击")
- }
- longpress(e) {
- this.lock = true;
- console.log("长按");
- }
注意:长按触发事件@longTap`和`@longpress`的区别
经过实践,发现在微信和h5端只有longpress起效果,在支付宝小程序端只有longTap起效果,一开始做用了longpress,结果坑了支付宝,这两个还要用区分编译分开来写两套代码
我在想官方不能把不同环境的长按事件合成一个吗?还是有技术难题?
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。