前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序监听屏幕滑动事件

小程序监听屏幕滑动事件

作者头像
Kindear
发布2020-10-26 15:27:36
3.4K0
发布2020-10-26 15:27:36
举报
小程序监听屏幕滑动事件

功能设计背景

  1. 小程序页面点击事件的坐标系是以左下角为原点的直角坐标系。
  2. 微信小程序提供bindtouchstartbindtouchend接口用于监听触点的变化。

功能实现

1.在你需要监听的块外增加监听遮罩层,包含待监听块在内

代码语言:javascript
复制
<view  bindtouchstart="touchStart" bindtouchend="touchEnd">
	<!--待监听功能模块-->
</view>

2.根据触点的起始位置和终止位置计算滑动方向(在data中配置touchxtouchy数值)

代码语言:javascript
复制
    touchStart(e) {
      console.log(e)
      var that = this;
      that.setData({
        touchx: e.changedTouches[0].clientX,
        touchy: e.changedTouches[0].clientY
      })
    },
    touchEnd(e) {
      console.log(e)
      var that = this;
      let x = e.changedTouches[0].clientX;
      let y = e.changedTouches[0].clientY;
      let turn = "";
      if (x - that.data.touchx > 50 && Math.abs(y - that.data.touchy) < 50) {      //右滑
        turn = "right";
      } else if (x - that.data.touchx < -50 && Math.abs(y - that.data.touchy) < 50) {   //左滑
        turn = "left";
      }
      if(y - that.data.touchy > 50 && Math.abs(x - that.data.touchx) < 50){ //下滑
        turn = "down";
      }else if(y - that.data.touchy < -50 && Math.abs(x - that.data.touchx) < 50){ //上滑
        turn="up";
      }
      //根据方向进行操作
      if(turn == 'down'){
        //下滑触发操作
      }
    },

参考 校园小程序 https://gitee.com/Kindear/yamako_procedure

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-10-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 小程序监听屏幕滑动事件
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档