在阻止了事件冒泡的情况下改变swiper的current时, swiper被 touch事件滑动
通过js改变current滑动到第四个, 已经阻止了事件冒泡, swiper理应不被touch, 但是swiper被touch事件改变回了第三个
此代码是通过uniapp 编译到微信小程序运行的
[图片][图片] <swiper class="w00 h00"
@change="swiperChange"
:current="checked"
:duration="200"
:touchable="false"
disable-touch
>
<swiper-item
v-for="(item, index) of data"
class="swiper-item pos-rel"
:key="index"
>
<movable-area
scale-area
class="movable-area"
@touchmove.stop="() => {}"
>
<movable-view
scale
inertia
:scale-min="1"
out-of-bounds
direction="all"
class="fx-al-center fx-center w00 h00"
@click="$emit('exit')"
@change.stop="move"
:friction="5"
>
<image
class="w00"
@click.stop=""
mode="widthFix"
:src="item.img"
></image>
</movable-view>
</movable-area>
</swiper-item>
</swiper>
methods: {
move(e) {
if (this.inSwiper) return;
if (e.detail.source === 'touch-out-of-bounds') {
let temp = this.checked;
if (!this.startSwipers) {
// 保存x轴初始坐标
this.x = e.detail.x;
this.startSwipers = true;
} else if (this.startSwipers) {
if (e.detail.x - this.x < 0) {
if (this.checked < this.data.length - 1) {
temp = this.checked + 1;
console.log();
}
} else {
if (this.checked > 0) {
temp = this.checked - 1;
}
}
this.checked = temp;
this.startSwipers = false;
this.inSwiper = true;
let timer = setTimeout(() => {
this.inSwiper = false;
clearTimeout(timer);
}, 300);
console.log('x:', e.detail.x - this.x);
console.log('setCurrent:', this.checked + 1);
}
}
},
swiperChange(e) {
if (e.detail.source === 'touch') {
this.checked = e.detail.current;
}
console.log(e.detail.source);
console.log('swiperChange:', e.detail.current + 1);
},
}
