v-touch-swipe issue

glittle

I have this:

<router-view v-touch-swipe="swipePage" class="layout-view"></router-view>

and:

methods: {
  swipePage(obj) {
    var delta;
    switch (obj.direction) {
      case 'right':
        delta = -1;
        break;
      case 'left':
        delta = 1;
        break;
      default:
        return;
    }

    if (Math.abs(obj.distance.x) < 0.5 * screen.width) {
      // ignore if not a wide swipe!
      return;
    }

    // get desired next page
    var goto = routeList.getNext(delta, this.$router.currentRoute);
    if (goto) {
      this.$router.push(goto);
    }
  }
}

With this, I can move between the pages in the app by swiping to the side. However, I can no longer scroll down on long pages. Should the handler return true or false or something else to allow the normal swipe and scroll to work?

Or, is there a better way to enable swiping between pages in the router-view?

Edit Investigating whether this is related: https://github.com/vuejs/vue-touch/issues/28
Edit It seems that Quasar does its own swipe and does not use vue-touch

rstoenescu

Haven’t tested for your specific use case, but first thing I notice is that you must use horizontal and scroll modifiers like this: v-touch-swipe.horizontal.scroll="swipePage"

glittle

@rstoenescu said in v-touch-swipe issue:

v-touch-swipe.horizontal.scroll

That seems to fix the issue. Thanks!