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/

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.