<view class="relative" @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend">
</view>
data() {
return {
flag: 0,
text: '',
lastX: 0,
lastY: 0
}
}
methods: {
handletouchmove: function(event) {
// console.log(event)
if (this.flag !== 0) {
return;
}
let currentX = event.touches[0].pageX;
let currentY = event.touches[0].pageY;
let tx = currentX - this.lastX;
let ty = currentY - this.lastY;
let text = '';
this.mindex = -1;
//左右方向滑动
if (Math.abs(tx) > Math.abs(ty)) {
if (tx < 0) {
text = '向左滑动';
this.flag = 1;
// this.getList(); //调用列表的方法
} else if (tx > 0) {
text = '向右滑动';
this.flag = 2;
}
}
//上下方向滑动
else {
if (ty < 0) {
text = '向上滑动';
this.flag = 3;
// this.getList(); //调用列表的方法
} else if (ty > 0) {
text = '向下滑动';
this.flag = 4;
}
} //将当前坐标进行保存以进行下一次计算
this.lastX = currentX;
this.lastY = currentY;
this.text = text;
},
handletouchstart: function(event) {
// console.log(event)
this.lastX = event.touches[0].pageX;
this.lastY = event.touches[0].pageY;
},
handletouchend: function(event) {
this.flag = 0;
this.text = '没有滑动';
},
}

uni-app小程序滑动事件的更多相关文章

  1. 「小程序JAVA实战」 小程序的事件(11)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-11/ 我们以前在web开发的时候,web页面也有一些相关的事件,当然小程序要接触屏幕要进行一些点击 ...

  2. uni与小程序,vue的区别

    标签区别 uni使用小程序的标签,vue使用web端的标签 标签名变化的: 标签描述\类别 vue uniapp 文本 span\font text 链接 a navigator/ router-li ...

  3. 微信小程序滑动选择器

    实现微信小程序滑动选择效果 在wxml文件中,用一个picker标签代表选择器,bindchange是用户点击确定后触发的函数,index是picker自带的参数,用户点击确定后,bindchange ...

  4. 微信小程序中事件

    微信小程序中事件 一.常见的事件有 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 ...

  5. 微信小程序的事件

    事件,视图层到逻辑层的一种通讯方式,或者将用户的行为返回到逻辑层,当我们在组件绑定事件之后,当我们触发事件,就会执行逻辑层绑定的事件,处理回调函数,当页面的事件触发之后 页面上元素一些额外事件,通过事 ...

  6. 小程序onShow事件获取options方法

    微信小程序 onShow() 事件 onShow() 事件不接受参数,因此无法获取页面 url 传递过来的参数,只有 onLoad() 事件可以. onShow(options){ console.l ...

  7. Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解

    Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解 说明:Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解,加密算法,是现在每个软件项目里必须用到的内容. 广泛应用在包括 ...

  8. Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序)

    Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序) 说明:在实际的业务场景中(无论是TO B还是TO C)不管是休闲食品.餐饮.水果.日用百货.母婴等高频 ...

  9. 小程序 onReachBottom 事件快速滑动时不触发的bug

    一般在列表页面 会先加载一定数量的数据 触发上拉加载这个动作的时候再陆续加载数据 假如上拉一次加载10条数据 在小程序中 你快速滑动页面触发加载这个事件的话 你会发现小程序卡着不动了 刚开始以为数据加 ...

随机推荐

  1. mysql update 修改多个字段and的语法问题

    在MySQL里面update一条记录,语法都正确的,但记录并没有被更新... 问题语句 执行之前的记录是这样的: 执行之后的记录是这样的: 可以看到,实际上是有效果的: why? 看起来,语法是完全没 ...

  2. Android 华为推送库下载不了

    问题:华为库下载不了,导致gradle同步失败 解决: 去掉华为推送在线下载相关代码,将在线下载修改为离线加载aar库 1.通过Maven 仓库离线包下载地址下载关于推送的包: http://deve ...

  3. 【剑指Offer面试编程题】题目1507:不用加减乘除做加法--九度OJ

    题目描述: 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 输入: 输入可能包含多个测试样例. 对于每个测试案例,输入为两个整数m和n(1<=m,n<=10 ...

  4. 基于Modelsim的视频流仿真

    一.前言 最近在看牟新刚写的<基于FPGA的数字图像处理原理及应用>,书中关于FPGA数字图像处理的原理的原理写的非常透彻,在网上寻找了很久都没有找到完整的源代码工程,因此尝试自己做了补充 ...

  5. JNDI Java 命名与目录接口

    jsp <% Context ctx = new InitialContext(); String jndiName = (String) ctx.lookup("java:comp/ ...

  6. Linux centos7 rsync工具介绍、rsync常用选项、rsync通过ssh同步

    一.rsync工具介绍 rsync是类unix系统下的数据镜像备份工具,从软件的命名上就可以看出来了——remote sync.rsync是Linux系统下的文件同步和数据传输工具,它采用“rsync ...

  7. LPS(最长回文子序列)

    (注意:我发现最长回文子序列(Longest Palindromic Subsequence)问题与最长回文子串(Longest Palindromic Substring)不一样,子序列不要求下标一 ...

  8. 6(计算机网络) 交换机与VLAN

    拓扑结构是怎么形成的? 我们常见到的办公室大多是一排排的桌子,每个桌子都有网口,一排十几个座位就有十几个网口,一个楼层就会有几十个甚至上百个网口.如果算上所有楼层,这个场景自然比你宿舍里的复杂多了.具 ...

  9. Django学习之ORM练习题

    一.表关系 创建表关系,并创建约束 班级表:class 学生表: student cid caption grade_id sid sname gender class_id 1 一年一班 1 1 乔 ...

  10. QQ企业通知识点---ClassSerializers

    Serializers  串列器 序列化器 串行器 MemoryStream   创建其支持存储区为内存的流. BinaryFormatter   以二进制格式将对象或整个连接对象图形序列化和反序列化 ...