uniapp 滑动事件,uniapp滚动监听
单一应用程序项目中怎么监听事件？下面uniapp教程栏目给大家介绍一下单一应用程序中监听触摸事件和滑动事件的方法，希望对大家有所帮助！
单一应用程序开发（仿饿了么)开发课程：进入学习
uni-app 中监听触摸事件，滑动事件
ColorUI使用文档：https://blog . csdn . net/deviangelia/article/details/119447883
手指滑动事件关键点在于三个事件：
1 、@touchstart:触摸开始；
2 、@touchmove:手指滑动的过程；
3 、@touchend:触摸结束，手指离开屏幕。
view class= margin-top-sm showMore-box
:style={
transform: translate x( moveX px)，
过渡：过渡
}
@touchstart=start
@touchend=end
@touchmove=move
view class= radius BG-gray padding-top-sm margin-right-XL style= flex:1；溢出：隐藏；
视图class= flex align-居中对齐-在填充之间-lr-sm
text class=text-bold text-black 和平精英/文本
text class= BG-灰色半径填充-lr-sm文本-绿色进入/text
/查看
view class= margin-top-sm padding-lr-sm
text class= cuIcon-绘制填充文本-黄色/text
text class= text-black text-bold padding-lr-sm 战绩/text
text class=text-black 和平战报已送达/text
/查看
view class= margin-top-sm padding-lr-sm
text class= cuIcon-绘制填充文本-黄色/text
text class= text-black text-bold padding-lr-sm 直播/文本
text class=text-black 万场老六，细节导师/文本
/查看
view class= padding-sm margin-top-sm flex align-center justify-between style= background:# AAAAAA；
text class= 更多服务/文本
text class=cuIcon-right/text
/查看
/查看
view class= radius BG-gray padding-sm flex align-center style= width:100 VW；身高：100%;位置：绝对；z指数：1;右：calc(-100 VW 15px)；top:0；
text class= cuIcon-向左拉文本-灰色/text
view class= text-gray padding-left-sm style= width:16px；{ {右文本} }/查看
/查看
/viewdata() {
返回{
startData: {
clientX: ，
客户： ,
},
moveX: 0，
触摸：{},
}
},
方法：{
//触摸触控事件
开始(e){ //@touchstart触摸开始
这个。过渡="。1s”；
这个。开始数据。clientx=e . changed touches[0].clientX//手指按下时的X坐标
这个。开始数据。clienty=e . changed touches[0].客户关系；//手指按下时的Y坐标
},
end(e){ //@touchend触摸结束
这个。movex=0；//触摸事件结束恢复原状
这个。过渡="。5s”；
如果(数学。ABS(这个。触摸。clientx-这个。startdata。clientx)100){//在事件结束时，判断滑动的距离是否达到出发需要执行事件的要求
console.log(执行查看跳转事件);
//这个。touch={ }；
}否则{
console.log(滑动距离不够，不执行跳转)
//这个。touch={ }；
}
},
move(event) { //@touchmove触摸移动
让触摸=事件。触摸[0]；//滑动过程中，手指滑动的坐标信息返回的是对象对象
this.touch=触摸
让数据=触摸。clientx-这个。开始数据。clientx
如果(触摸。clientx这个。开始数据。clientx){//向左移动
如果(数据-250) {
数据=-250;
}
}
如果(触摸。clientx这个。开始数据。clientx){//向右移动
if(this.moveX==0) {
数据=0
}否则{
如果(数据50) {
数据=50;
}
}
}
this.moveX=data
},
}.展示更多-盒子{
位置：相对；
//过渡：全部。5s；
}1、手指触摸前
2、手指触摸，并向左滑动
3、松开手指，页面回弹
页面采用的科洛瑞这个钢性铸铁库来写的，自己的钢性铸铁样式写的少，基本全是用他的类，有些地方也懒得去自己调颜色、距离、大小，就直接用科洛瑞的类，挺方便的。
colorui github下载地址：https://github . com/weilan wl/color ui/
第一次写滑动效果，写的不好。
初学者，代码质量堪忧，虚心学习，接受批评指正。
更多编程相关知识，请访问：编程入门！以上就是浅谈单一应用程序项目怎么监听触摸和滑动事件的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。