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

最近使用swiper组件时,遇到的问题,点击swiper内任何地方animationfinish事件都会触发,致使写在animationfinish事件中的代码不断被执行,影响操做,
由于个人操做就是须要在current改变的时候执行,翻看文档uniapp文档连接后发现swiper有change事件(current改变的时候触发),因此个人解决办法是将原来在animationfinish中执行的代码转移到change事件中。解决app

<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事件不是局部的,修改后会致使滑动失效ide

<view class="btn btnFF5D5D" @click="handlePutShelf(res)">上架</view>
//改成
<view class="btn btnFF5D5D" @touchend.stop="handlePutShelf(res)">上架</view>
 
方法二:在swiper上添加 :disable-touch=“true”
也不适用,一样会致使滑动失效this

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

相关文章
相关标签/搜索