修复 cl-banner 1处bug、优化手势操作、增加touch代理功能

修复bug:
     在ios端滑动时,transition-duration: 0.3s 样式导致卡顿,将class改成style更新
优化手势:
    判断手势方向,当很向滑动时阻止页面上下滚动
touch代理:
    将 onTouchStart,onTouchMove,onTouchEnd 三个方法暴露出去,可以在其它view上定义相应方法,绑定后,滑动其它地方相当于滑动banner
This commit is contained in:
呼吸二氧化碳
2025-10-30 17:04:17 +08:00
committed by GitHub
parent 85d5b4d562
commit 33ec0cd33e

View File

@@ -12,11 +12,9 @@
> >
<view <view
class="cl-banner__list" class="cl-banner__list"
:class="{
'is-transition': isAnimating
}"
:style="{ :style="{
transform: `translateX(${slideOffset}px)` transform: `translateX(${slideOffset}px)`,
transitionDuration: isAnimating ? '0.3s' : '0s'
}" }"
> >
<view <view
@@ -303,6 +301,11 @@ function startAutoplay() {
} }
} }
// 触摸起始Y坐标
let touchStartY = 0
// 横向滑动参数
let touchHorizontal = 0
/** /**
* 处理触摸开始事件 * 处理触摸开始事件
* 记录触摸起始状态,准备手势识别 * 记录触摸起始状态,准备手势识别
@@ -324,6 +327,8 @@ function onTouchStart(e: TouchEvent) {
// 禁用动画,开始手势跟踪 // 禁用动画,开始手势跟踪
isAnimating.value = false; isAnimating.value = false;
touchStartPoint.value = e.touches[0].clientX; touchStartPoint.value = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
touchHorizontal = 0
touchStartTimestamp.value = Date.now(); touchStartTimestamp.value = Date.now();
initialOffset.value = slideOffset.value; initialOffset.value = slideOffset.value;
} }
@@ -336,6 +341,26 @@ function onTouchStart(e: TouchEvent) {
function onTouchMove(e: TouchEvent) { function onTouchMove(e: TouchEvent) {
if (props.list.length <= 1 || props.disableTouch || !isTouching.value) return; if (props.list.length <= 1 || props.disableTouch || !isTouching.value) return;
const x = touchStartPoint.value - e.touches[0].clientX
if (touchHorizontal == 0) {
// 只在horizontal=0时判断一次
const y = touchStartY - e.touches[0].clientY
if (Math.abs(x) > Math.abs(y)) {
// 如果x轴移动距离大于y轴移动距离则表明是横向移动手势
touchHorizontal = 1
}
if (touchHorizontal == 1) {
// 如果是横向移动手势,则阻止默认行为(防止页面滚动)
e.preventDefault()
}
}
// 横向移动时才处理
if (touchHorizontal != 1) {
return
}
// 计算手指移动距离,实时更新偏移量 // 计算手指移动距离,实时更新偏移量
const deltaX = e.touches[0].clientX - touchStartPoint.value; const deltaX = e.touches[0].clientX - touchStartPoint.value;
slideOffset.value = initialOffset.value + deltaX; slideOffset.value = initialOffset.value + deltaX;
@@ -347,6 +372,9 @@ function onTouchMove(e: TouchEvent) {
*/ */
function onTouchEnd() { function onTouchEnd() {
if (props.list.length <= 1 || !isTouching.value) return; if (props.list.length <= 1 || !isTouching.value) return;
touchStartY = 0;
touchHorizontal = 0;
// 重置触摸状态 // 重置触摸状态
isTouching.value = false; isTouching.value = false;
@@ -409,6 +437,13 @@ onMounted(() => {
getRect(); getRect();
startAutoplay(); startAutoplay();
}); });
// 将触摸事件暴露给父组件支持控制其它view将做touch代理
defineExpose({
onTouchStart,
onTouchMove,
onTouchEnd,
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -419,11 +454,7 @@ onMounted(() => {
@apply flex flex-row h-full w-full overflow-visible; @apply flex flex-row h-full w-full overflow-visible;
// HBuilderX 4.8.2 bug临时处理 // HBuilderX 4.8.2 bug临时处理
width: 100000px; width: 100000px;
transition-property: transform;
&.is-transition {
transition-property: transform;
transition-duration: 0.3s;
}
} }
&__item { &__item {