滑动事件判断(手指上划、下滑/左滑、右滑)

需求描述：手指向上滑动pushpage向上变长
图片
代码如下

/*wxss*/
/* 可拉动页面 */
.pushpage{width: 750rpx;height: 700rpx;/* background-color:rgba(0, 0, 0, 0.7) ; */background: #fff;position: absolute;bottom: 0;transition: all 0.2s linear;border-radius: 20rpx 20rpx 0 0;box-shadow:-4rpx 22rpx 65rpx 25rpx rgb(180, 172, 172,0.5);
}
.push100{height: 1350rpx;
}
.title{padding: 20rpx;font-size: 28rpx;
}

//wxml
<view class="pushpage {{pageall?'push100':''}}"
bindtouchstart='touchStart'
bindtouchmove='touchMove'
bindtouchend='touchEnd'>

//js
data:{touchS : [0,0],touchE : [0,0],
}
touchStart: function(e){// console.log(e.touches[0].pageX)let sx = e.touches[0].pageXlet sy = e.touches[0].pageYthis.data.touchS = [sx,sy]},touchMove: function(e){let sx = e.touches[0].pageX;let sy = e.touches[0].pageY;this.data.touchE = [sx, sy]},touchEnd: function(e){let start = this.data.touchSlet end = this.data.touchE// console.log(start)// console.log(end)if(start[1] < end[1] - 50){// console.log('下滑')this.setData({pageall:false})}else if(start[1] > end[1] + 50){// console.log('上滑')this.setData({pageall:true})}else{// console.log('静止')}},

滑动事件判断(手指上划、下滑/左滑、右滑)相关推荐

微信小程序界面从右边滑出_微信小程序--左滑右滑的乐趣
左滑右滑你不再是一个人无论你是一个程序猿还是一个程序媛,每天干的事除了coding还是coding,代码不能解决的问题(什么问题自己心里还没点abcd数嘛),探探能帮你解决.最近网上特流行一款交 ...
H5中判断手势左滑右滑
vue-touch-events实现H5判断屏幕左右滑动概述: 在H5项目中,涉及到手势交互,需要判断屏幕左滑右滑,最开始使用了原生的touchstart和touchend方法,根据手势起始点的距离 ...
ionic4 hammerjs手势事件左滑右滑
ionic4 hammerjs手势事件左滑右滑首先需要安装hammerjs ,在项目目录下执行: npm install hammerjs --save ts: import 'hammerjs'; ...
android 地图路径规矩绘制,地图如何绘制？看地图的规则为什么是上北下南左西右东？...
地图是按一定的比例运用符号.颜色.文字注记等描绘显示地球表面的自然地理.行政区域.社会经济状况的图形.现代地图通过电脑等技术很容易绘制,那么古代地图是如何绘制的呢?在我国看地图的规则为什么总是上北下南 ...
android 左滑右滑,Android仿滴答清单左滑右滑效果
直接上效果图记录仿写滴答清单App 过程中的技术点本文分为以下章节,读者可按需阅读: 1.自定义RecycleItemTouchHelper 2.实现滴答清单左滑右滑效果 3.RecycleVie ...
探探左滑右滑简单实现
简单实现探探左滑右滑效果演示首先上网下载一个library文件夹接 ...
微信小程序日历左滑右滑特效
自己写了个小程序左滑右滑的特效,可以用来左右切换日历,日历的渲染很简单,参考电脑的日历位置摆放好即可,在此我只写出滑动特效的代码,以供参考. 一.datepicker.wxml的页面结构 <vi ...
html左滑效果图,前端福利——左滑右滑，绝对是你见过的最简单的写法 - 你猜猜看...
上个月使用bootstrap和seajs搭建了前端通用框架,就是为了使代码分块话,js和css直接通过配置就可调用,这样既方便了以后的开发,又方便了效率! 先看下框架图形吧 example就是手机端经 ...
Android直播软件搭建左滑右滑清屏控件
Android直播软件搭建左滑右滑清屏控件最近在迭代直播软件搭建功能时,项目中之前的左滑清屏是用ViewPager实现的.这次迭代遇到一个布局层次导致的点击失效问题,继续用ViewPager的话改动 ...

滑动事件判断(手指上划、下滑/左滑、右滑)

滑动事件判断(手指上划、下滑/左滑、右滑)相关推荐

最新文章

热门文章