3. v-touch-swipe issue

v-touch-swipe issue

  • G

    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

    0
  • Admin

    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"

    0
    G
     1 Reply
  • G

    @rstoenescu said in v-touch-swipe issue:

    v-touch-swipe.horizontal.scroll

    That seems to fix the issue. Thanks!

    0