uni-app專案中怎麼監聽事件？以下uniapp教學專欄為大家介紹一下uni-app中監聽觸控事件和滑動事件的方法，希望對大家有幫助！
ColorUI使用文件： https://blog.csdn.net/DevilAngelia/article/details /119447883
手指滑動事件關鍵點在於三個事件：
1、@touchstart ：觸摸開始； 2、@touchmove：手指滑動的過程； 3、@touchend：觸碰結束，手指離開螢幕。
<view class="margin-top-sm showMore-box"
:style="{
transform: 'translateX('+moveX+'px)',
transition: transition
}"
@touchstart="start"
@touchend="end"
@touchmove="move">
<view class="radius bg-gray padding-top-sm margin-right-xl" 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 class="padding-sm margin-top-sm flex align-center justify-between" style="background: #AAAAAA;">
<text class="">更多服务</text>
<text class="cuIcon-right"></text>
</view>
</view>
<view class="radius bg-gray padding-sm flex align-center" style="width: 100vw; height: 100%; position: absolute; z-index: 1; right: calc(-100vw + 15px); top: 0;">
<text class="cuIcon-pullleft text-gray"></text>
<view class="text-gray padding-left-sm" 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/
第一次寫入滑動效果，寫的不好。 初學者，程式碼品質堪憂，虛心學習，接受批評指正。
更多程式相關知識，請造訪：程式設計入門！ ！
以上是淺談uni-app專案怎麼監聽觸摸和滑動事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
