No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    v-touch-swipe issue

    Framework
    2
    3
    2797
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      glittle last edited by 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

      1 Reply Last reply Reply Quote 0
      • rstoenescu
        rstoenescu Admin last edited by

        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"

        G 1 Reply Last reply Reply Quote 0
        • G
          glittle @rstoenescu last edited by

          @rstoenescu said in v-touch-swipe issue:

          v-touch-swipe.horizontal.scroll

          That seems to fix the issue. Thanks!

          1 Reply Last reply Reply Quote 0
          • First post
            Last post