uniApp监听左右滑动事件

简介: uniApp监听左右滑动事件

监听左右滑动事件的步骤

1. 添加需要监听滑动事件的元素

在你的页面中,添加需要监听滑动事件的元素。这可以是一个 viewswiper 或其他组件,取决于你的需求。例如:

<template>
  <view class="body" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
    <!-- 页面内容 -->
  </view>
</template>

uniapp的滑动事件我也是感觉挺不错的,关键是能够实现局部滑动,这一点就非常的棒。

2. 编写事件处理逻辑


在页面的 <script> 部分,编写事件处理逻辑。我们将使用 @touchstart 事件记录触摸起始点的横坐标,@touchmove 事件计算滑动距离,并根据距离判断滑动方向,最后使用 @touchend 事件清除触摸起始点的记录。

<script>
export default {
  data() {
    return {
      startX: '', // 触摸起始点横坐标
    };
  },
  methods: {
    touchStart(event) {
      // 记录触摸起始点的横坐标
      this.startX = event.touches[0].clientX;
    },
    touchMove(event) {
      // 计算滑动距离
      const currentX = event.touches[0].clientX;
      const deltaX = currentX - this.startX;
      // 判断滑动方向
      if (deltaX > 50) {
        // 向右滑动逻辑   这里只建议写一些性能消耗小的逻辑,比如:this.status = !this.status 因为当他的横坐标大于或小于50时,每隔一个数字都会执行一次,所以...非常消化性能
        console.log('向右滑动逻辑')
      } else if (deltaX < -50) {
        // 向左滑动逻辑   这里只建议写一些性能消耗小的逻辑,比如:this.status = !this.status 因为当他的横坐标大于或小于50时,每隔一个数字都会执行一次,所以...非常消化性能
        console.log('向左滑动逻辑')
      }
    },
    touchEnd() {
      // 清除触摸起始点记录,这里也可以写一些比较复杂的逻辑,每滑动一次松后执行。
    },
  },
};
</script>

在这个示例中,我们使用了一个名为 startX 的数据变量来存储触摸起始点的横坐标。在 touchStart 事件中记录这个值,在 touchMove 事件中计算滑动距离,并在 touchEnd 事件中清除这个值。根据滑动距离的正负值,我们判断出滑动的方向。


最后,根据你的需求添加其他逻辑和样式,以完善示例。你可以使用这个基本示例来实现各种有趣的滑动效果和交互。


提示:touchMove这里只建议写一些性能消耗小的逻辑,比如:this.status = !this.status 因为当他的横坐标大于或小于50时,每隔一个数字都会执行一次,所以...非常消化性能,然后大家可以看一下touchEnd这里是每滑动一次并且松手的后执行,所以那些比较耗性能的逻辑代码写到touchEnd里面。

总结

通过使用 UniApp 的事件绑定和触摸事件,你可以轻松地监听左右滑动事件并实现各种有趣的交互效果。希望这篇博客可以帮助你开始使用 UniApp 创建具有滑动功能的应用程序。

离的正负值,我们判断出滑动的方向。

相关文章
|
移动开发 Android开发 iOS开发
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
724 0
|
6月前
|
小程序
在uniapp中监听globalData中的值变化
在uniapp中监听globalData中的值变化
284 0
uniapp input框监听回车搜索事件效果demo(整理)
uniapp input框监听回车搜索事件效果demo(整理)
|
2月前
|
开发工具
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
阿里云点播服务web播放器sdk,短剧视频类App实现参考。仿抖音 仿陌陌 短视频 无限滑动播放 视频流。无uniapp video 原生组件的层级、遮挡、覆盖问题,适合与不同功能视图组合使用,实现丰富的应用功能。
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
|
6月前
|
移动开发 小程序 API
uniapp组件库SwipeAction 滑动操作 使用方法
uniapp组件库SwipeAction 滑动操作 使用方法
159 1
|
6月前
|
移动开发 小程序 JavaScript
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
722 1
uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)
uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)
uniapp轮播图高度随变和左右滑动也获取高度
uniapp轮播图高度随变和左右滑动也获取高度
|
6月前
|
Web App开发 小程序 Android开发
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
197 0
|
6月前
uniapp滑动事件
uniapp滑动事件
460 0