Bagaimana untuk memantau acara dalam projek uni-app? Lajur uniapp tutorial berikut akan memperkenalkan kepada anda kaedah memantau acara sentuh dan acara gelongsor dalam apl uni saya harap ia akan membantu anda!
Dengar acara sentuh dan acara gelongsor dalam apl uni
Dokumentasi penggunaan ColorUI: https://blog.csdn.net/DevilAngelia/article/ butiran /119447883
Inti utama acara gelongsor jari ialah tiga acara:
1 @touchstart: touch start;
2. @touchmove: proses gelongsor jari;
3. @touchend: Sentuhan tamat dan jari meninggalkan skrin.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <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>
|
Salin selepas log masuk
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | data() {
return {
startData: {
clientX: & #39;',
clientY: & #39;',
},
moveX: 0,
touch: {},
}
},
methods: {
start(e){
this .transition = & #39;.1s';
this .startData.clientX = e.changedTouches[0].clientX;
this .startData.clientY = e.changedTouches[0].clientY;
},
end(e){
this .moveX = 0;
this .transition = & #39;.5s';
if (Math.abs( this .touch.clientX- this .startData.clientX) > 100) {
console.log(& #39;执行查看跳转事件');
} else {
console.log(& #39;滑动距离不够,不执行跳转')
}
},
move(event) {
let touch = event.touches[0];
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;
},
}
|
Salin selepas log masuk
1 2 3 4 | .showMore-box{
position: relative;
}
|
Salin selepas log masuk
1 Sebelum menyentuh dengan jari
2
3 Lepaskan jari anda dan halaman akan melantun semula
Halaman ditulis menggunakan pustaka css colorUI, dengan anda sendiri css Terdapat sangat sedikit gaya yang ditulis, dan saya pada dasarnya menggunakan kelasnya Di sesetengah tempat, saya terlalu malas untuk menyesuaikan warna, jarak dan saiz sendiri, jadi saya hanya menggunakan kelas colorUI, yang sangat mudah.
alamat muat turun github colorui: https://github.com/weilanwl/ColorUI/
Kali pertama saya menulis kesan gelongsor, saya tidak menulisnya dengan baik.
Pemula, kualiti kod membimbangkan, belajar dengan fikiran terbuka dan menerima kritikan dan pembetulan.
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:
Pengenalan kepada Pengaturcaraan! !
Atas ialah kandungan terperinci Perbincangan ringkas tentang cara projek uni-app memantau peristiwa sentuhan dan gelongsor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!