最近使用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>
排序