uniapp监测用户左滑右滑上滑下滑事件

定义组件

定义的该组件名称 swiper-direct-com(自己可以随便命名)

<template><view class="wrapper" @touchstart="fingerstart" @touchend="fingerend"><slot></slot></view>
</template><script>export default {name: "swipe-direct-com",data() {return { // 记录开始位置startData: {clientX: '',clientY: ''},};},props: {updDistance: { // 上下滑动 超过多少距离触发 updownDistancetype: Number,default: 100},lrDistance: { // 左右滑动 超过多少距离触发type: Number,default: 50},topMed: { // 上划触发 方法名type: String,default: '',},bottomMed: { // 下滑触发 方法名type: String,default: '',},leftMed: { // 左滑触发 方法名type: String,default: '',},rightMed: { // 右滑触发 方法名type: String,default: '',}},// 解析数据 mounted() {},methods: {// 当按下去的时候fingerstart(e) {// 记录 距离可视区域左上角 左边距 和 上边距this.startData.clientX = e.changedTouches[0].clientX;this.startData.clientY = e.changedTouches[0].clientY;},// 当抬起来的时候fingerend(e) { // 当前位置 减去 按下位置 计算 距离const subX = e.changedTouches[0].clientX - this.startData.clientX;const subY = e.changedTouches[0].clientY - this.startData.clientY;if (subY > this.updDistance || subY < -this.updDistance) {if (subY > this.updDistance) {this.bottomscroll(subY);} else if (subY < -this.updDistance) {this.topscroll(subY);}} else {if (subX > this.lrDistance) {this.rightscroll(subX);} else if (subX < -this.lrDistance) {this.leftscroll(subX);} else {console.log('无效操作')}}},// 上滑触发topscroll(dista) {this.topMed ? this.$emit(`${this.topMed}`,dista) : nullconsole.log("触发了上滑方法!");},// 下滑触发bottomscroll(dista) {this.bottomMed ? this.$emit(`${this.bottomMed}`,dista) : nullconsole.log("触发了下滑方法!");},// 右滑触发rightscroll(dista) {this.rightMed ? this.$emit(`${this.rightMed}`,dista) : nullconsole.log("触发了右滑方法!");},// 左滑触发leftscroll(dista) {this.leftMed ? this.$emit(`${this.leftMed}`,dista) : nullconsole.log("触发了左滑方法!");}}}
</script>

页面使用

<swiper-direct-com
:lrDistance="5"
leftMed="scrollL"
rightMed="scrollR"
@scrollL="scrollL"
@scrollR="scrollR"><!-- 内容区 --></swiper-direct-com>

import swiperDirectCom from '@/components/swiper-direct-com.vue'
export default{components:{swiperDirectCom},data(){return{}},methods:{// 左滑触发方法scrollL() {  /*业务逻辑 ....*/}// 右滑触发方法scrollR() {  /*业务逻辑 ....*/}}
}

uniapp监测用户左滑右滑上滑下滑事件相关推荐

地上有一个m行和n列的方格。一个机器人从坐标0,0的格子开始移动，每一次只能向左，右，上，下四个方向移动一格，但是不能进入行坐标和列坐标的数位之和大于k的格子。例如，当k为18时，机器人能够进入方格
地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时,机器人能够进入方格 ...
Android 手势识别向左，右，上，下，滑动的方向
识别手势滑动的方向主要是用的 GestureDetector的onFling ,如果想回顾下GestureDetector 可以参考下面的链接地址 GestureDetector 文章问题也 ...
微信小程序上滑加载和下拉刷新
上滑加载 :上滑是指鼠标上滑或者手指上滑,此时滚动条向下滚动,加载旧数据. 下拉刷新:下拉是指鼠标下拉或者手机下拉,此时滚动条向上滚动,加载新数据. scroll-view方法遇到的问题:如果数据量很 ...
Python，OpenCV提取图片中的多个茄子种子轮廓，并按从左到右排序后显示
Python,OpenCV提取图片中的多个茄子种子轮廓,并按从左到右排序后显示 1. 效果图 2. 源码写这篇博客源于博友的提问,期望把下图中的多个茄子种子按从左到右的顺序提取出来: 1. 效果图 ...
四元数左乘右乘_四元数、欧拉角学习笔记个人理解
一.背景知识:点乘.叉乘复数的点乘:(ai+bj+ck)•(xi+yj+zk)=-(ax+by+cz) 复数的叉乘:(ai+bj+ck)×(xi+yj+zk)=(ax)i×i+(ay)i×j+(az ...
Arcgis自下而上从左到右进行编号
添加字段xmin和ymax !shape.extent.Xmin! !shape.extent.Ymax! 计算结果对处理好的矢量按这个两个字段进行排序排序结果后的objectid即可做为斜坡单元 ...
区间子数组个数 - LeetCode 795 - 从左向右与从右向左查找
一.问题描述给你一个整数数组 nums 和两个整数:left 及 right .找出 nums 中连续.非空且其中最大元素在范围 [left, right] 内的子数组,并返回满足条件的子数组的个 ...
js判断手指的上滑，下滑，左滑，右滑，事件监听
2019独角兽企业重金招聘Python工程师标准>>> 原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY: 2:当触发touchmo ...
移动端html右滑空白,移动端之touch事件_上滑、下滑、左滑和右滑
开发app的前端框架有哪些移动原理:第一,当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY:第二,当触发touchmove事件时,在获取此时手指的横坐 ...

uniapp监测用户左滑右滑上滑下滑事件

uniapp监测用户左滑右滑上滑下滑事件相关推荐

最新文章

热门文章