DEV Community

Cover image for Creating a Tinder-like Swipe UI on Vue

Creating a Tinder-like Swipe UI on Vue

yev on June 11, 2019

Have you ever wondered how that swipe-right-swipe-left, tinder-like user experience was built? I did, several days ago. I come from more of a backe...
Collapse
 
suniluam profile image
sunil-uam

I am creating a similar UI but the swipeable component can take space longer than mobile screen. Since, I need swiping in horizontal direction only, I have locked swipe in vertically. But I need to scroll to view the whole component. If I unlock the vertical interaction, I can only drag around the component but not scroll it. Is there a solution for this?
Tried numerous other libraries but ones that allow scrolling does not have swiping animation.

Collapse
 
fiqihwew profile image
Ahmad Fiqih

hallo iam really being helped with your project
im beginner from indonesia
i have project Creating a Tinder-like Swipe UI on Vue with quasar framework
can i see your full project swipe UI like this with quasar framework?

Collapse
 
_mariacheline profile image
s h i

Have you ever tried this with Typescript?

Collapse
 
vycoder profile image
yev

Unfortunately, no. But I don't think there would be major issues. Except probably explicitly defining some types for the things you'll use in vue2-interact.

Collapse
 
_mariacheline profile image
s h i

Thanks for responding to my comment.
I actually followed the blog's tutorial rather than using vue2-interact and I'm having some problems with types.

Collapse
 
vipulphysiofirst profile image
Vipul Chaursiya

Hello @yev thanks for this article , I'm using this thought in my site it is doing good, but I stuck in one problem,
that is like I'm using this tinder-like swipe card in testimonial block and it is on the homepage .
when I scroll on the y-axis it is not scrolling because I have to lock t in the y-axis u can test in i;m giving u the link physiofirst.in/, please suggest somthing

Collapse
 
sinisimattia profile image
Mattia Sinisi

Awesome man

Collapse
 
vycoder profile image
yev

Thanks for finding my blabbering useful! I highly appreciate it!

Collapse
 
booladsudan profile image
Ariel Acha

Hello sir @vycoder , boss I want to use this to my project but how can I do it in vue3 I can't get it to work boss. Salamat po! :)

Collapse
 
angelina234234 profile image
WinterAngelina

How can I applied it in my tinder resource tindermodapk.pro/ with accurate way?

Collapse
 
flaviadiaz1 profile image
flaviadiaz1 • Edited

How can I use this on my Tinder profile in the right way?
tindermodapk.download/tinder-for-pc/