小程序判断滑动方向

偏执的太偏执、 2022-05-11 07:40 175阅读 0赞

WXML:
    <view id="id" bindtouchstart="handletouchtart" bindtouchmove="handletouchmove"
    style="width:100%px;height:80px;line-height:80px;color:#fff;text-align:center; background:red">
    {
       {text}} 
    </view>
    
    index.js
    
    Page({
      data: {
        lastX: 0,
        lastY: 0,
        text: "没有滑动",
      },
      handletouchmove: function (event) {
        // console.log(event)
        let currentX = event.touches[0].pageX
        let currentY = event.touches[0].pageY
        let tx = currentX - this.data.lastX
        let ty = currentY - this.data.lastY
        let text = ""
    
        if (Math.abs(tx) > Math.abs(ty)) {
          //左右方向滑动
          if (tx < 0)
            text = "向左滑动"
          else if (tx > 0)
            text = "向右滑动"
        }
        else {
          //上下方向滑动
          if (ty < 0)
            text = "向上滑动"
          else if (ty > 0)
            text = "向下滑动"
        }
    
        //将当前坐标进行保存以进行下一次计算
        this.data.lastX = currentX
        this.data.lastY = currentY
        this.setData({
          text: text,
        });
    
      },
      handletouchtart: function (event) {
        // console.log(event)
        // 赋值
        this.data.lastX = event.touches[0].pageX
        this.data.lastY = event.touches[0].pageY
      }
    })

转载地址:[https://www.cnblogs.com/changxue/p/8466836.html][https_www.cnblogs.com_changxue_p_8466836.html]

[https_www.cnblogs.com_changxue_p_8466836.html]: https://www.cnblogs.com/changxue/p/8466836.html

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序实现微动画效果｜消失渐变、变大缩小、滑动平移、方向摇晃

微动画，作为一种有效的视觉反馈手段，通过精细的动态效果增强用户界面的互动性和趣味性，实现吸引人的微动画效果，从而提升小程序的用户体验。

╰+哭是因爲堅強的太久メ/ 2024年04月22日 15:24/ 0 赞/ 7 阅读

相关小程序 slider 双向滑动

上效果图，csdn不支持视频，这是手机录屏做成的gif，所以画质有点。。 ![20190920133405935.gif][] 直接上代码，小程序暂时不支持slide...

Love The Way You Lie/ 2024年04月20日 08:24/ 0 赞/ 7 阅读

相关小程序实现标尺滑动

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

不念不忘少年蓝@/ 2023年06月10日 15:28/ 0 赞/ 116 阅读

相关小程序--左侧滑动效果

一、效果图讲什么都不如直接上效果图好，所以我们先来看下实现效果如何。通过滑动屏幕，或者点击左上角的图标按钮，都能实现侧边栏的划出效果。 ![70][]![

「爱情、让人受尽委屈。」/ 2022年10月06日 00:57/ 0 赞/ 126 阅读

相关利用监听事件做一个判断是在x方向还有y方向上面的判断，判断在屏幕上滑动的趋势

auto dis = Director::getInstance()->getEventDispatcher(); auto listener = EventListene

傷城~/ 2022年08月06日 00:15/ 0 赞/ 98 阅读

相关系统最小滑动判断距离打印

大于这个距离滑动才被判定为滑动 Log.d(TAG, "滑动判断距离 = "+ViewConfiguration.get(getBaseContext()).getS

灰太狼/ 2022年06月14日 07:49/ 0 赞/ 126 阅读

相关小程序滑动悬浮tab

效果图： ![SouthEast][] 介绍： 1，首先写一个tab的template组件； 2，自定义一个滑动悬浮的组件flaot-tab； 3，计算滑

素颜马尾好姑娘i/ 2022年06月01日 01:14/ 0 赞/ 172 阅读

相关小程序-监听手势滑动

步奏: 添加两个事件(手指按下时,手指松开时) bindtouchstart="touchStart" //开始 bindtouchend="touchE

港控/mmm°/ 2022年05月18日 00:54/ 0 赞/ 213 阅读

相关小程序判断滑动方向

WXML: <view id="id" bindtouchstart="handletouchtart" bindtouchmove="handletouchm

偏执的太偏执、/ 2022年05月11日 07:40/ 0 赞/ 176 阅读

相关小程序禁止页面左右滑动

小程序禁止页面左右滑动 PS：在开发过程中可能会遇到某一个页面可以左右滑动，在开发者工具是查看不出来，只有在手机预览才可以看的出来（尝试左或者右滑动）。我的解决方法是

绝地灬酷狼/ 2021年09月29日 08:48/ 0 赞/ 411 阅读