当前位置：首页 > article >正文

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

article 2025/2/11 1:20:40

背景

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

核心代码

<template>
  <Swipe
    class="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">
        <StairNewUserBanner
          v-if="item.taskScene === SCENE.NEWUSER || item.taskScene === SCENE.REUNION"
          :banner-data="item"
          @jumpPage="jumpToActivePage"
        />
        <ProgressCard
          v-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">
        <BannerSection
          v-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)
  }