Swipe横滑与SwipeItem自定义横滑相互影响

devtools/2025/2/12 3:52:32/

背景

vue项目，H5页面，使用vant的组件库轮播组件<Swipe>，UI交互要求，在每个SwipeItem中有内容，可自横滑，查看列表内容

核心代码

<template><Swipeclass="my_swipe":autoplay="3000"indicator-color="#9d9d9d":stop-propagation="false":show-indicators="false"@change="onChange"><SwipeItem v-for="(item, index) in activeList" :key="item.activityId" class="swipe_item"><div class="activity-container"><StairNewUserBannerv-if="item.taskScene === SCENE.NEWUSER || item.taskScene === SCENE.REUNION":banner-data="item"@jumpPage="jumpToActivePage"/><ProgressCardv-else:card-data="item":card-index="index"@join="clickJoin(item, index)"@jumpPage="jumpToActivePage"/></div></SwipeItem></Swipe>
</template>

<template><div class="stair-new-user-banner-container"><div class="top" :style="topStyle" @click="jumpPage"><template v-if="!isCustomImg"><div class="title"><div class="left">{{ topTitle }}</div><div v-if="topTitle2" class="right">·</div><div class="right">{{ topTitle2 }}</div><img class="arrow" src="https://www.baidu.com/" /></div><div class="desc"><div v-if="showActivityRemindTime" class="remind-time">距结束<div v-if="activityRemindTime.days !== '00'" class="time-item"><div class="num">{{ activityRemindTime.days }}</div>天</div><div v-if="activityRemindTime.hours !== '00'" class="time-item"><div class="num">{{ activityRemindTime.hours }}</div>小时</div><div v-if="activityRemindTime.minutes !== '00' && activityRemindTime.days === '00'" class="time-item"><div class="num">{{ activityRemindTime.minutes }}</div>分钟</div></div><div class="line"></div><div>{{ activityBizTypeDesc }}</div></div></template></div><div ref="bannerContent" class="content"><div class="crisp"><BannerSectionv-for="(item, index) in sectionList":key="index":section-data="item":static-data="staticData":section-list="sectionList":index="index"/><div class="bottom-bar"><div class="process-bar" :style="processBarStyle"></div></div></div></div></div>
</template>

问题描述

当想要滚动sectionList的内容时，SwipeItem跟着一起横滑

问题原因

sectionList列表的横滑事件冒泡了，影响到了轮播的横滑

解决方案

javascript">  mounted() {this.handleTouchMove = (e) => {e.stopPropagation()}this.handleTouchStart = (e) => {e.stopPropagation()}this.$refs.bannerContent.addEventListener('touchmove', this.handleTouchMove)this.$refs.bannerContent.addEventListener('touchstart', this.handleTouchStart)},beforeDestroy() {this.$refs.bannerContent.removeEventListener('touchmove', this.handleTouchMove)this.$refs.bannerContent.removeEventListener('touchstart', this.handleTouchStart)}