修复 cl-banner 1处bug、优化手势操作、增加touch代理功能
修复bug:
在ios端滑动时,transition-duration: 0.3s 样式导致卡顿,将class改成style更新
优化手势:
判断手势方向,当很向滑动时阻止页面上下滚动
touch代理:
将 onTouchStart,onTouchMove,onTouchEnd 三个方法暴露出去,可以在其它view上定义相应方法,绑定后,滑动其它地方相当于滑动banner
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user