浅谈uni-app项目怎么监听触摸和滑动事件
uni-app项目中怎么监听事件?下面uniapp教程栏目给大家介绍一下uni-app中监听触摸事件和滑动事件的方法,希望对大家有所帮助!
uni-app 中监听触摸事件,滑动事件
ColorUI使用文档: https://blog.csdn.net/DevilAngelia/article/details/119447883
手指滑动事件关键点在于三个事件:
1、@touchstart :触摸开始;2、@touchmove:手指滑动的过程;3、@touchend:触摸结束,手指离开屏幕。
<view :style="{ transform: 'translateX('+moveX+'px)', transition: transition}"><view><view><text>和平精英</text><text>进入</text></view><view><text></text><text>战绩</text><text>和平战报已送达</text></view><view><text></text><text>直播</text><text>万场老六,细节导师</text></view><view><text>更多服务</text><text></text></view></view><view><text></text><view>{{rightText}}</view></view></view>
data() {return { startData: { clientX: '', clientY: '', }, moveX: 0, touch: {},}},methods: {// 触摸touch事件start(e){ //@touchstart 触摸开始 this.transition = '.1s'; this.startData.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标 this.startData.clientY = e.changedTouches[0].clientY; //手指按下时的Y坐标},end(e){ //@touchend触摸结束 this.moveX = 0; //触摸事件结束恢复原状 this.transition = '.5s'; if(Math.abs(this.touch.clientX-this.startData.clientX) > 100) { //在事件结束时,判断滑动的距离是否达到出发需要执行事件的要求 console.log('执行查看跳转事件'); // this.touch = {}; } else { console.log('滑动距离不够,不执行跳转') // this.touch = {}; }},move(event) { //@touchmove触摸移动 let touch = event.touches[0]; //滑动过程中,手指滑动的坐标信息 返回的是Objcet对象 this.touch = touch; let data = touch.clientX - this.startData.clientX; if(touch.clientX this.startData.clientX) { //向右移动 if(this.moveX == 0) { data = 0 } else { if(data>50) {data = 50; } } } this.moveX = data;},}
.showMore-box{position: relative;// transition: all .5s;}
1、手指触摸前
2、手指触摸,并向左滑动
3、松开手指,页面回弹
页面采用的colorUI这个css库来写的,自己的css样式写的少,基本全是用他的类,有些地方也懒得去自己调颜色、距离、大小,就直接用colorUI的类,挺方便的。
colorui github下载地址: https://github.com/weilanwl/ColorUI/
第一次写滑动效果,写的不好。初学者,代码质量堪忧,虚心学习,接受批评指正。
更多编程相关知识,请访问:编程入门!!