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
}"
@touchstart="start"
@touchend="end"
@touchmove="move">
<view style="flex: 1; overflow: hidden;">
<view class="flex align-center justify-between padding-lr-sm">
<text class="text-bold text-black">和平精英</text>
<text class="bg-gray radius padding-lr-sm text-green">进入</text>
</view>
<view class="margin-top-sm padding-lr-sm">
<text class="cuIcon-paintfill text-yellow"></text>
<text class="text-black text-bold padding-lr-sm">战绩</text>
<text class="text-black">和平战报已送达</text>
</view>
<view class="margin-top-sm padding-lr-sm">
<text class="cuIcon-paintfill text-yellow"></text>
<text class="text-black text-bold padding-lr-sm">直播</text>
<text class="text-black">万场老六,细节导师</text>
</view>
<view style="background: #AAAAAA;">
<text class="">更多服务</text>
<text class="cuIcon-right"></text>
</view>
</view>
<view style="width: 100vw; height: 100%; position: absolute; z-index: 1; right: calc(-100vw 15px); top: 0;">
<text class="cuIcon-pullleft text-gray"></text>
<view style="width: 16px;">{{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(data<-250) {
data = -250;
}
}
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/
第一次写滑动效果,写的不好。 初学者,代码质量堪忧,虚心学习,接受批评指正。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfcfbj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24