网站外连,营销型网站制作成都,小榄做网站企业,插画师零基础自学背景
vue项目#xff0c;H5页面#xff0c;使用vant的组件库轮播组件Swipe#xff0c;UI交互要求#xff0c;在每个SwipeItem中有内容#xff0c;可自横滑#xff0c;查看列表内容
核心代码
templateSwipeclassmy_swipe:autoplayH5页面使用vant的组件库轮播组件SwipeUI交互要求在每个SwipeItem中有内容可自横滑查看列表内容
核心代码
templateSwipeclassmy_swipe:autoplay3000indicator-color#9d9d9d:stop-propagationfalse:show-indicatorsfalsechangeonChangeSwipeItem v-for(item, index) in activeList :keyitem.activityId classswipe_itemdiv classactivity-containerStairNewUserBannerv-ifitem.taskScene SCENE.NEWUSER || item.taskScene SCENE.REUNION:banner-dataitemjumpPagejumpToActivePage/ProgressCardv-else:card-dataitem:card-indexindexjoinclickJoin(item, index)jumpPagejumpToActivePage//div/SwipeItem/Swipe
/template
templatediv classstair-new-user-banner-containerdiv classtop :styletopStyle clickjumpPagetemplate v-if!isCustomImgdiv classtitlediv classleft{{ topTitle }}/divdiv v-iftopTitle2 classright·/divdiv classright{{ topTitle2 }}/divimg classarrow srchttps://www.baidu.com/ //divdiv classdescdiv v-ifshowActivityRemindTime classremind-time距结束div v-ifactivityRemindTime.days ! 00 classtime-itemdiv classnum{{ activityRemindTime.days }}/div天/divdiv v-ifactivityRemindTime.hours ! 00 classtime-itemdiv classnum{{ activityRemindTime.hours }}/div小时/divdiv v-ifactivityRemindTime.minutes ! 00 activityRemindTime.days 00 classtime-itemdiv classnum{{ activityRemindTime.minutes }}/div分钟/div/divdiv classline/divdiv{{ activityBizTypeDesc }}/div/div/template/divdiv refbannerContent classcontentdiv classcrispBannerSectionv-for(item, index) in sectionList:keyindex:section-dataitem:static-datastaticData:section-listsectionList:indexindex/div classbottom-bardiv classprocess-bar :styleprocessBarStyle/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 classcontent scroll-x{ {true}}/scroll-view包裹的横滑没有这个问题
