通过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) {
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);
},
}
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
问题已经解决了,再阻止一下touchstart就行了
.swiper-item { .movable-area { width: 100vw; height: 100vh; } > .cloak { z-index: 1; } > .item { z-index: 100; } } .w00 { width: 100%; } .h00 { height: 100%; } .pos-rel { position: relative; } .fx-al-center { display: flex; align-items: center; } .fx-center { display: flex; justify-content: center; align-items: center; }