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

背景

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

核心代码

html 复制代码
<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>
html 复制代码
<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列表的横滑事件冒泡了,影响到了轮播的横滑

解决方案

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

fix

小程序的swiper组件和每个swiper-item中用<scroll-view class="content" scroll-x="{ {true}}"></scroll-view>包裹的横滑没有这个问题

相关推荐
夏梦春蝉41 分钟前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W4 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏5 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083166 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头7 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github