【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>
 排序

相關文章
相關標籤/搜索