Create a VueJS/VuetifyJS implementation inspired by the WhatsApp swipe between tabs animation

Question

Create a VueJS/VuetifyJS implementation inspired by the WhatsApp swipe between tabs animation

Currently, I am utilizing the VuetifyJS framework for VueJS and I am interested in replicating the swipe between tabs transition seen in WhatsApp for Android.

In WhatsApp, you have the ability to swipe left or right to view a new section as you swipe. VuetifyJS, on the other hand, does not display the tab content until the swipe is completed. I have created an example on CodePen to demonstrate what I currently have: https://codepen.io/anon/pen/GdbxoL?&editors=101

Is there a way to reveal the content of the tab while swiping towards it?

Update: I found a solution that worked for me using Flickity:

javascript mobile vue.js swipe vuetify.js

Answer 1

Answer №1

To implement swipe gestures in your application, utilize the v-touch directive to capture the gesture and trigger a method to switch between tabs.

UPDATE: Below is an illustration of how to use the v-touch directive with tab navigation:

<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">Go to next tab</v-btn>
      </div>
    </div>
  </v-app>
</div>

Javascript Code:

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

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

  },

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

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

For a demonstration, check out the live demo Here. Please note that the swipe feature is optimized for mobile devices, not compatible with mouse swipe on desktop.

Answer 2

To implement swipe gestures in your application, utilize the v-touch directive to capture the gesture and trigger a method to switch between tabs.

UPDATE: Below is an illustration of how to use the v-touch directive with tab navigation:

<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">Go to next tab</v-btn>
      </div>
    </div>
  </v-app>
</div>

Javascript Code:

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

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

  },

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

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

For a demonstration, check out the live demo Here. Please note that the swipe feature is optimized for mobile devices, not compatible with mouse swipe on desktop.

Create a VueJS/VuetifyJS implementation inspired by the WhatsApp swipe between tabs animation

Answer №1

Similar questions

What is the best way to access a Python API or local data within the Google Visualization DataTable JavaScript library?

What is the proper way to utilize JQuery and Ajax to communicate with a global function in writing?

Listening for key combinations in VueJS using a mounted event listener

Utilize the ng-click feature for swiping interactions in Ionic v1

Filtering dynamically generated table rows using Jquery

When loading a page with Puppeteer using the setContent method, images may not be loaded

Creating a nested set of directives by iterating over an array within an AngularJS directive

Is the next function triggered only after the iframe has finished loading?

What is the best way to define the active-class for nuxt-links with parameters?

Unable to view sidebar navigation on the screen

Forwarding the geographic coordinates directly to the system's database

Ways to show a corresponding number beneath every image that is generated dynamically

Ways to adjust text color after clicking on an element

When accessing the JavaScript date object, no output is being returned

Replace the indexOf() method to be called on a null value

Using Nuxt.js within a Docker Container powered by Paketo.io / Cloud Native Buildpacks

In what way can the result of the code displayed be considered as truthful?

Tips for obscuring URLs in AngularJS code without relying on base 64 encoding or Gulp obfuscation techniques

Choosing only those elements that are not children of parents with a specific class by utilizing the `.not()` method

converting HTML values to TypeScript