v-touch-swipe issue



  • 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


  • 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"



  • @rstoenescu said in v-touch-swipe issue:

    v-touch-swipe.horizontal.scroll

    That seems to fix the issue. Thanks!


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.