【问题标题】:Quasar Touch Swipe IssuesQuasar Touch 滑动问题
【发布时间】:2021-06-19 11:24:31
【问题描述】:

我有两个问题,第一个是指令没有按预期工作。

我已经抓住了只向右滑动的例子:

<div class="q-pa-md row justify-center">
      <q-card
        v-touch-swipe.mouse.right="handleSwipe"
        class="custom-area cursor-pointer bg-primary text-white shadow-2 relative-position row flex-center"
        style="min-height: 200px; min-width: 300px"
      >
        <div v-if="info" class="custom-info">
          <pre>{{ info }}</pre>
        </div>
        <div v-else>
          Swipe to right only
          <q-icon name="arrow_forward" />
        </div>
      </q-card>
</div>
setup() {
    const info = ref(null)

    return {
      info,
      handleSwipe({evt, ...newInfo}) {
        info.value = newInfo
      }
    }
  }

当我向左滑动时,我得到了这个:

我应该不能触发这个吧?所以想象一下我想水平滑动项目,如果我捕捉到 up 和 down 事件,我会弄乱滚动,我什至不能忽略它们。

另一个问题是将它与图像一起使用,我使用了文档中所述的 draggable="false" ,它不会触发滑动。示例:

<div
      v-touch-swipe.horizontal="handleSwipe"
      class="flex row cursor-pointer"
      @click="$router.push({
      name: 'productDetails',
      params: {
        id: product.id
      }
      })"
    >
      <q-img
        :src="imageSource"
        :draggable="false"
        placeholder-src="~assets/placeholder.png"
        @dragstart.prevent
        loading="lazy"
        spinner-color="primary"
        :srcset="sourceSet"
        sizes="(max-width: 400px) 400w,
              (min-width: 400px) and (max-width: 800px) 800w,
              (min-width: 800px) and (max-width: 1200px) 1200w,
              (min-width: 1200px) 1600w"
      />
</div>

我无法在 jsfiddle 上重现这个:

https://jsfiddle.net/andrempcosta/17d6uctw/1/

文档:https://next.quasar.dev/vue-directives/touch-swipe#introduction

【问题讨论】:

    标签: javascript vue.js quasar


    【解决方案1】:

    升级到上一个RC,修复了问题。

    【讨论】:

      猜你喜欢
      • 2019-10-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-02-06
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多