【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”
也不适用,同样会导致滑动失效

<swiper disable-touch="true" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"></swiper>
 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值