当前位置:   article > 正文

微信小程序‘长按’事件触发‘点击’事件的解决方法_长按后点击…

长按后点击…

问题:

对于同一控件同时设置@tap和@longpress,会发现长按时先出现@longpress的事件,然后触发点击事件tap。

通过测试,我们发现,小程序中事件执行的顺序是
点击:touchstart → touchend → tap
长按 touchstart → longpress → touchend → tap

解决方法一:

  1. <view
  2. v-else
  3. class="posterImg"
  4. @touchstart="bindTouchStart"
  5. @touchend="bindTouchEnd"
  6. @longpress="bingLongTap"
  7. @tap="bindTap"
  8. >
  9. <image
  10. :src="posterImgUrl"
  11. show-menu-by-longpress="true"
  12. mode="aspectFit"
  13. style="width: 100vw; height: 100vh"
  14. />
  15. </view>
  1. touchstart(e) {
  2. this.startTime = e.timeStamp;
  3. }
  4. touchend(e) {
  5. this.endTime = e.timeStamp;
  6. }
  7. tap(e) {
  8. if(this.endTime - this.startTime < 350) {
  9. console.log("点击")
  10. }
  11. }
  12. longpress(e) {
  13. console.log("长按");
  14. }

解决方法二:

  1. data(){
  2. return {
  3. lock: false,
  4. }
  5. }
  6. touchend(e) {
  7. if(this.lock) {
  8. setTimeout(()=>{
  9. this.lock = false;
  10. }, 200)
  11. }
  12. }
  13. tap(e) {
  14. if(this.lock) return;
  15. console.log("点击")
  16. }
  17. longpress(e) {
  18. this.lock = true;
  19. console.log("长按");
  20. }

注意:长按触发事件@longTap`和`@longpress`的区别

经过实践,发现在微信和h5端只有longpress起效果,在支付宝小程序端只有longTap起效果,一开始做用了longpress,结果坑了支付宝,这两个还要用区分编译分开来写两套代码

我在想官方不能把不同环境的长按事件合成一个吗?还是有技术难题?

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/120512?site
推荐阅读
相关标签
  

闽ICP备14008679号