微信小程序之滑动事件以及事件冒泡

最新推荐文章于 2025-07-08 11:27:21 发布

reta丶

最新推荐文章于 2025-07-08 11:27:21 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序前端 JavaScript css

本文链接：https://blog.youkuaiyun.com/qq_40477864/article/details/89162353

微信小程序点击、双击、长按事件可参考 https://blog.youkuaiyun.com/qq_40477864/article/details/89159381

一、滑动事件

微信小程序的滑动事件是通过bindtouchmove实现的，通过比较滑动事件前后的坐标判断滑动方向，这里只给出了简单的左右滑动。

wxml：

<!--index.wxml-->
<view class="container">
  <button bindtouchmove="move">
    {
  
  {text}}
  </button>
</view>

js：

//index.js
Page({
  data: {
    lastX: 0,          //滑动开始时x坐标初始为0
    lastY: 0,          //滑动开始时y坐标初始为0
    text: "没有滑动"
  },
  //滑动移动事件
  move: function (e) {
    //获取当前鼠标坐标
    var currentX = e.touches[0].pageX
    var currentY = e.touches[0].pageY
    var text = ""
    //左右方向滑动
    if (currentX > this.data.lastX) {
      tex