vue-fullpage.js与vuetify carousel组合使用移动端滑动无响应求助

数据老陈

2026-9-29

vuetify carousel 内部默认会拦截触摸事件阻止冒泡，导致父层的 vue-fullpage.js 无法捕获 carousel 区域的滑动手势，只有页面空白区域的滑动能触发 fullpage 滚动。

根据你的使用场景选择对应方案即可：

若不需要 carousel 支持触摸滑动，仅保留点击箭头/指示器切换的能力：
直接给所有 <v-carousel> 组件添加 touchless 属性即可，禁用 carousel 本身的触摸事件拦截，滑动事件会自然冒泡到 fullpage 层触发滚动，修改后的组件示例：
```
<v-carousel v-model="model" vertical class="element" touchless>
```
若需要保留 carousel 的触摸滑动能力，同时支持在 carousel 区域滑动切换 fullpage 页面：
1. 先修改 fullpage 的配置项，添加 normalScrollElements 规则，告诉 fullpage 不要主动拦截 carousel 区域的触摸事件：
```
options: {
  // 你的其他原有配置
  normalScrollElements: '.v-carousel'
}
```
2. 给 v-carousel 绑定触摸事件监听，判断用户滑动方向：如果滑动方向和 carousel 自身滚动方向不一致，手动调用 fullpage 暴露的API切换页面即可。比如纵向 carousel 检测到横向滑动超过阈值时，调用 this.$refs.fullpage.api.moveSectionDown()/moveSectionUp() 方法切换 fullpage 页面；横向 carousel 检测到纵向滑动超过阈值时，再触发 fullpage 切换。
快速调试方案：给全局添加样式，覆盖 carousel 默认的触摸行为规则：
```
.v-carousel {
  touch-action: auto !important;
}
```
该样式会取消carousel默认的触摸行为限制，让滑动事件可以正常向上冒泡。