背景

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列表的橫滑事件冒泡了，影響到了輪播的橫滑

解決方案

  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)}

fix

小程序的swiper組件和每個swiper-item中用<scroll-view class="content" scroll-x="{ {true}}"></scroll-view>包裹的橫滑沒有這個問題