79 行
1.8 KiB
Plaintext
79 行
1.8 KiB
Plaintext
<template>
|
|
<view style="flex: 1;">
|
|
<page-head title="横向滑动时阻止默认事件，即阻止页面滚动"></page-head>
|
|
<view class="uni-padding-wrap uni-common-mt" style="height: 40px; align-items: center;">
|
|
<text>手势方向：{{direction}}</text>
|
|
</view>
|
|
<scroll-view style="flex: 1;" @scroll="onScroll">
|
|
<view v-for="item in 120" :key="item" class="box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
|
|
{{item}}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const scrollTop = reactive({
|
|
value: 0
|
|
})
|
|
|
|
defineExpose({
|
|
scrollTop
|
|
})
|
|
|
|
function getDirection(x : number, y : number) {
|
|
if (x > y && x > 10) {
|
|
return 'horizontal';
|
|
}
|
|
if (y > x && y > 10) {
|
|
return 'vertical';
|
|
}
|
|
return '';
|
|
}
|
|
const startX = ref(0)
|
|
const startY = ref(0)
|
|
const direction = ref("")
|
|
|
|
function touchstart(e : UniTouchEvent) {
|
|
direction.value = ""
|
|
startX.value = e.touches[0].clientX
|
|
startY.value = e.touches[0].clientY
|
|
}
|
|
|
|
function touchend(e : UniTouchEvent) {
|
|
console.log('>>>>> touchend')
|
|
direction.value = ""
|
|
}
|
|
|
|
function touchmove(e : UniTouchEvent) {
|
|
|
|
const deltaX = e.touches[0].clientX - startX.value
|
|
const deltaY = e.touches[0].clientY - startY.value
|
|
if (direction.value == "") {
|
|
direction.value = getDirection(Math.abs(deltaX), Math.abs(deltaY))
|
|
}
|
|
|
|
//只有横向滑动时才阻止默认事件，即阻止页面滚动
|
|
if (direction.value != 'horizontal') {
|
|
return
|
|
}
|
|
|
|
|
|
if (e.cancelable) {
|
|
e.preventDefault()
|
|
}
|
|
}
|
|
|
|
function onScroll(e: UniScrollEvent) {
|
|
console.log('>>>>> onScroll', e.detail.scrollTop)
|
|
scrollTop["value"] = e.detail.scrollTop
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.box {
|
|
border-bottom: 1px solid #c6d1c3;
|
|
padding: 16px 10px;
|
|
}
|
|
</style>
|