首页 > 移动平台 > 详细

uni-app判断手势

时间:2020-10-03 00:13:12      阅读:94      评论:0      收藏:0      [点我收藏+]

判断手势

Created: Sep 29, 2020 10:57 PM
功能: 手势

<template>
<view @touchstart="handleTouchstart" @touchend="handleTouchend">
  <slot></slot>
</view>
</template>

<script>
export default {
name: "swiperAction",
  data() {
    return {
      startTime: 0,
      startX: 0,
      startY: 0
    }
  },
  methods: {
    handleTouchstart(event) {
      this.startTime = Date.now()
      this.startX = event.changedTouches[0].clientX
      this.startY = event.changedTouches[0].clientY
    },
    handleTouchend(event) {
      const endTime = Date.now()
      const endX = event.changedTouches[0].clientX
      const endY = event.changedTouches[0].clientY
      // 判断按下的时常
      if (endTime - this.startTime > 2000) {
        return
      }
      // 滑动的方向
      let direction = "";
      //先判断用户滑动的距离是否合法合法:判断滑动的方向
      if (Math.abs(endX - this.startX) > 10&&Math.abs(endY-this.startY)<10) {
        direction = endX - this.startX > 0 ? "right" : "left";
      }else {
        return
      }
      this.$emit("swiperAction",{
        direction
      })
    }
  }
}
</script>

<style scoped>

</style>
  1. 获取list

uni-app判断手势

原文:https://www.cnblogs.com/qisexin/p/13763108.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!