uniapp封装手势滑动屏幕核心代码（向左滑，向右滑）

wantLG

已于 2024-07-27 09:51:01 修改

阅读量1.6k

点赞数 1

分类专栏：小程序uni-app 文章标签：小程序 uni-app

于 2020-11-21 21:54:39 首次发布

本文链接：https://blog.csdn.net/weixin_45491473/article/details/109907982

版权

小程序uni-app 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文前推荐一下👉前端必备工具推荐网站(图床、API和ChatAI、智能AI简历、AI思维导图神器等实用工具):
站点入口：http://luckycola.com.cn/
图床：https://luckycola.com.cn/public/dist/#/imghub
多种API：https://luckycola.com.cn/public/dist/#/
ChatAI：https://luckycola.com.cn/public/dist/#/chatAi
AI思维导图神器：https://luckycola.com.cn/public/dist/#/aiQStore/aiMindPage

前言:uniapp官方没有提供左滑右滑的事件，但是像探探app那样左滑右滑是怎样实现的呢，本篇就来说一下怎样封装一个uniapp左滑右滑事件

在这里插入图片描述

核心思路

给容器绑定两个触屏事件touchstart(用户按下)和touchend（用户离开）
用户按下屏幕事件
a.记录用户按下屏幕的时间 Date.now() 时间戳，即返回1970-1-1到现在的毫秒数
b.记录用户按下屏幕的坐标X和Y
用户离开屏幕事件
a.记录用户离开屏幕的时间 Date.now()
b. 记录用户离开屏幕的坐标 x和y
c. 根据两个时间运算，判断用户按下的屏幕时长是否合法
d. 根据两对坐标判断距离是否合法，判断滑动方向

实现步骤

1. 给容器绑定两个触屏事件

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

<script>
export default {
 data() {
   return {
   };
 },
 methods: {
   /*用户按下屏幕
     1.记录用户按下屏幕的时间  Date.now() 时间戳 返回 1970-1-1到现在的毫秒数
     2.记录用户按下屏幕的坐标x和y
   */
   handleTouchstart(e) {
  console.log(e);
      },
   handleTouchend(e) {
  console.log(e);
},
 },
};
</script>

<style>
view {
 width: 100%;
 height: 500rpx;
 background-color: aqua;
}
</style>

2.用户按下屏幕事件,记录

<script>
export default {
 data() {
   return {
     //按下的时间
     startTime: 0,
     //按下的坐标
     startX: 0,
     startY: 0,
   };
 },
 methods: {
   /*用户按下屏幕
     1.记录用户按下屏幕的时间  Date.now() 时间戳 返回 1970-1-1到现在的毫秒数
     2.记录用户按下屏幕的坐标x和y
   */
   handleTouchstart(e) {
     //记录用户按下的时间
     this.startTime = Date.now();
     //记录用户按下的坐标
     this.startX = e.changedTouches[0].clientX;
     this.startY = e.changedTouches[0].clientY;

     console.log(this.startX);
     console.log(this.startY);
   },
   handleTouchend(e) {},
 },
};
</script>

3.用户离开屏幕事件


<script>
export default {
 data() {
   return {
     //按下的时间
     startTime: 0,
     //按下的坐标
     startX: 0,
     startY: 0,
   };
 },
 methods: {
   /*用户按下屏幕
     1.记录用户按下屏幕的时间  Date.now() 时间戳 返回 1970-1-1到现在的毫秒数
     2.记录用户按下屏幕的坐标x和y
   */
   handleTouchstart(e) {
     //记录用户按下的时间
     this.startTime = Date.now();
     //记录用户按下的坐标
     this.startX = e.changedTouches[0].clientX;
     this.startY = e.changedTouches[0].clientY;
   },
   handleTouchend(e) {
     const endTime = Date.now();
     const endX = e.changedTouches[0].clientX;
     const endY = e.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;
     }

     console.log(direction);
   },
 },
};
</script>