Replicate the WhatsApp swipe between tabs transition in VueJS/VuetifyJS


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?



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



JS



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






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

The Dalles, Oregon

眉山市

清晰法令