【uniapp】swiper内的点击导致 animationfinish事件被触发问题

本文主要是介绍【uniapp】swiper内的点击导致 animationfinish事件被触发问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

亲测可用，若有疑问请私信

最近使用swiper组件时，遇到的问题，点击swiper内任何地方animationfinish事件都会触发，导致写在animationfinish事件中的代码不断被执行，影响操作，
因为我的操作就是需要在current改变的时候执行，翻看文档uniapp文档链接后发现swiper有change事件（current改变的时候触发），所以我的解决办法是将原来在animationfinish中执行的代码转移到change事件中。解决

<view class="tab">
<u-tabs-swiper ref="uTabs" @change="tabsChange" :list="list" :current="current" :bold="false" bar-height="3" bar-width="60" active-color="#333333" :is-scroll="false" inactive-color="#808080" font-size="28"></u-tabs-swiper>
</view>
<swiper :current="swiperCurrent" @transition="transition" @change="handleSwperChange" @animationfinish="animationfinish">
<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
<u-checkbox-group @change="checkboxGroupChange">
<u-checkbox @change="checkboxChange" v-model="res.checked" shape="circle" size=28 icon-size=18 label-size=24 active-color="#FF5D5D" :name="res.id" v-for="(res, y) in dataList" :key="y">
</u-checkbox>
</u-checkbox-group>
</swiper-item>
</swiper>
tabsChange(index) {
this.swiperCurrent = index;// tabs通知swiper切换
},
// swiper-item左右移动，通知tabs的滑块跟随移动
transition (e) {
let dx = e.detail.dx;
this.$refs.uTabs.setDx(dx);
},
animationfinish(e) {
let current = e.detail.current;
this.$refs.uTabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
},
//swiper current改变
handleSwperChange(e) {
//原在animationfinish中的操作转移到这里
this.isManageStatus = false
this.typeActive = "默认排序"
this.query.pageSorts = [{ asc: false, column: "create_time" }]
this.query.pageNumber = 1;
this.query.flag =e.detail.current == 0?1:2
this.getData()
},

在网上查找的其他方法：将@click改为@touchend.stop
此种方法在我这里不适用，因为我的change事件不是局部的，修改后会导致滑动失效

<view class="btn btnFF5D5D" @click="handlePutShelf(res)">上架</view>
//改为
<view class="btn btnFF5D5D" @touchend.stop="handlePutShelf(res)">上架</view>

方法二：在swiper上添加 :disable-touch=“true”
也不适用，同样会导致滑动失效

这篇关于【uniapp】swiper内的点击导致 animationfinish事件被触发问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！