Replicate the WhatsApp swipe between tabs transition in VueJS/VuetifyJS

Question

I'm using the VuetifyJS framework for VueJS and I would like to replicate the swipe between tabs transition WhatsApp for Android uses.

You can swipe in WhatsApp to the left or right and you get to see the new section while you swipe. In VuetifyJS you don't see the content of the tabs until you finished the swipe. I made a CodePen example what I have so far: https://codepen.io/anon/pen/GdbxoL?&editors=101

How to show the content of the tab while swiping to it?

Edit: The solution that worked for me is Flickity: https://flickity.metafizzy.co/

Steadman

I actually see the content of the tab while swiping on my computer, is this problem only visible on small screens? – Roundworm

@Roundworm The contents don't move with your swipe. Currently the tab only changes once you lift your finger, while the content should move with your finger. – Shawannashawl

Follow this issue, it's coming in vuetify v2 apparently github.com/vuetifyjs/vuetify/issues/6565 – Laguna

@Laguna Is this still just a feature request or decided for a future Vuetify update? – Steadman

Answer 1

You need to use the v-touch directive to capture swipe gesture and after you can execute a method to move to the next tab or previous.

EDIT: This is an example using the v-touch directive with tabs

<div id="app">
  <v-app id="inspire">
    <div>
      <v-tabs
        v-touch="{
        left: () => assignSwipeValue('Left'),
        right: () => assignSwipeValue('Right')
        }"
        v-model="active"
        color="cyan"
        dark
        slider-color="yellow"
      >
        <v-tab
          v-for="n in 3"
          :key="n"
          ripple
        >
          Item {{ n }}
        </v-tab>
        <v-tab-item
          v-for="n in 3"
          :key="n"
        >
          <v-card flat>
            <v-card-text>{{ text }}</v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs>

      <div class="text-xs-center mt-3">
        <v-btn @click.native="next">next tab</v-btn>
      </div>
    </div>
  </v-app>
</div>

JS

new Vue({
  el: '#app',
  data () {

    return {
      active: null,
      text: 'Swipe Example With Tabs'
    }

  },

  methods: {
    next () {
      const active = parseInt(this.active)
      this.active = (active < 2 ? active + 1 : 0).toString()
    },

    assignSwipeValue(direction) {
      this.next()
    }
  }
})

You can see a live demo Here but you need to open from a mobile device, the swipe with mouse doesn't work.

Phosphoprotein

Can you provide an example please? This is what I have so far: codepen.io/anon/pen/GdbxoL?&editors=101 – Steadman

I just tested it but the tabs content doesn't move while I move my finger. Do I miss something? – Steadman

You can see this for more information alligator.io/vuejs/vue-touch-events – Phosphoprotein