小程序判断滑动方向

偏执的太偏执、 2022-05-11 07:40 248阅读 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 条评论，248人围观）

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

相关阅读

相关小程序实现标尺滑动

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

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

相关小程序标签滑动吸顶

1、HTML <view class="title { {isFixedTop?'title-fixed':''}}" id="navbar">

妖狐艹你老母/ 2022年11月14日 12:00/ 0 赞/ 195 阅读

相关小程序实现滑动吸附效果

wxml <view class="container"> <view class="header-top"></view> <view

àì夳堔傛蜴生んèń/ 2022年10月11日 15:54/ 0 赞/ 246 阅读

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

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

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

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

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

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

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

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

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

相关小程序滑动悬浮tab

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

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

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

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

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

相关小程序判断滑动方向

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

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

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

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

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