原因分析:
通过 el-drawer 控件实现了底部栏的展示和隐藏,但在移动设备上侧边栏展开时仍然可以通过触摸滑动页面内容,导致用户体验不佳,产生意外的滚动行为。
这是因为在底部栏展开时,未能有效阻止页面内容的触摸滑动。
解决方案:
<template><el-drawer v-model="drawer.show" direction="btt">...</el-drawer>
</template>
<script lang="ts" setup name="...">
const preventTouchMove = (event: TouchEvent) => {event.preventDefault(); // 阻止默认的触摸移动行为
};const drawerShow = (show: boolean) => {drawer.value.show = show;const bodyElement = document.querySelector('body');if (show) {bodyElement?.addEventListener('touchmove', preventTouchMove, { passive: false });} else {bodyElement?.removeEventListener('touchmove', preventTouchMove, false);}
};
</script>