收藏
回答

在阻止了事件冒泡的情况下改变swiper的current时, swiper被 touch事件滑动

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug swiper, movable-area 微信安卓客户端 8.0.24 2.24.7
通过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);
  },
}
回答关注问题邀请回答
收藏

2 个回答

  • Demons
    Demons
    2022-07-15

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2022-07-15
    有用
    回复 1
    • 王尧
      王尧
      发表于小程序端
      2022-07-20

      问题已经解决了,再阻止一下touchstart就行了

      2022-07-20
      回复
  • 王尧
    王尧
    2022-07-15
    .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;
    }
    
    2022-07-15
    有用
    回复
登录 后发表内容