shanlh / vue-tinder Goto Github PK
View Code? Open in Web Editor NEWHave your own Tinder and TanTan.
Home Page: https://shanlh.github.io/vue-tinder
License: MIT License
Have your own Tinder and TanTan.
Home Page: https://shanlh.github.io/vue-tinder
License: MIT License
Component not rendering in vue 3
Will a section with a comprehensive options list be added to the documentation?
I'm using the branch Next with Vue3.
Everything works well except for the "card move away" animation. Instead, it looks like the card goes behind the deck.
The only situation where the expected animation is occurring is when I "rewind": the card "0" (the 1st of the deck) will come back with the correct animation.
Do you have any idea where this issue could come from? Which part of the code takes care of this animation?
I attached a recording of my deck. And I share below my code.
Thanks in advance for your help.
<template>
<f7-page name="swipe">
<vue-tinder
ref="tinder"
key-name="key"
v-model:queue="queue"
:offset-y="10"
allowDown
@submit="onSubmit"
>
<template #default="{ data }">
{{ data.key }}
</template>
<template #like>🙂</template>
<template #nope>🤮</template>
<template #super>🤩</template>
<template #down>🤔</template>
<template v-slot:rewind>
<span>REWIND</span>
</template>
</vue-tinder>
<f7-row tag="p" class="tinder-buttons">
<f7-button class="col" small raised round @click="decide('rewind')">↩️</f7-button>
<f7-button class="col" large raised round @click="decide('nope')">🤮</f7-button>
<f7-button class="col" small raised round @click="decide('down')">🤔</f7-button>
<f7-button class="col" large raised round @click="decide('like')">🙂</f7-button>
<f7-button class="col" small raised round @click="decide('super')">🤩</f7-button>
</f7-row>
</f7-page>
</template>
<script>
import VueTinder from "vue-tinder";
import { ref } from "vue";
export default {
components: { VueTinder },
setup() {
const queue = ref([]);
const history = [];
const tinder = ref(null);
for (let i = 0; i < 15; i++) {
queue.value.push({ key: i });
}
const onSubmit = ({ type, key, item }) => {
history.push(item);
};
const decide = (choice) => {
if (choice === "rewind") {
if (history.length) {
const item = history.pop();
tinder.value.rewind([item]);
}
return;
}
tinder.value.decide(choice);
};
return {
queue,
tinder,
onSubmit,
decide,
};
},
};
</script>
<style lang="less">
.page[data-name="swipe"] .page-content {
overflow: hidden;
}
.vue-tinder {
position: relative;
-webkit-tap-highlight-color: transparent;
margin: auto;
width: 300px;
height: 350px;
padding: 20px;
.v-move {
transition: none !important;
}
.tinder-card {
position: absolute;
height: calc(100% - 40px);
width: calc(100% - 40px);
color: white;
font-size: 15em;
font-weight: bold;
line-height: 500px;
text-align: center;
background: var(--f7-theme-color-tint);
border-radius: var(--f7-button-border-radius);
.md & {
box-shadow: 0px 0px 5px rgb(0 0 0 / 50%);
}
.ios & {
box-shadow: 0px 0px 3px rgb(0 0 0 / 25%);
}
.tinder-rewind-leave-active {
transition: all 0.5s ease;
}
.tinder-rewind-leave-to {
opacity: 0;
}
.pointer-wrap {
position: absolute;
display: block;
z-index: 101;
width: 64px;
height: 64px;
font-size: 64px;
line-height: 64px;
pointer-events: none;
transition: opacity 0.3s ease;
}
.nope-pointer-wrap {
right: 10px;
top: calc(50% - 32px);
}
.like-pointer-wrap {
left: 10px;
top: calc(50% - 32px);
}
.super-pointer-wrap {
bottom: 10px;
left: calc(50% - 32px);
}
.down-pointer-wrap {
top: 10px;
left: calc(50% - 32px);
}
}
}
.tinder-buttons {
align-items: center;
margin: 1em auto;
max-width: 300px;
.button {
background: white;
}
.button-large {
width: calc(var(--f7-button-large-height) * 1.5);
height: calc(var(--f7-button-large-height) * 1.5);
font-size: var(--f7-button-large-height);
.md & {
padding: 3px 0px 0px 3px;
}
.ios & {
padding: 0px;
}
}
.button-small {
width: calc(var(--f7-button-small-height) * 1.5);
height: calc(var(--f7-button-small-height) * 1.5);
font-size: var(--f7-button-small-height);
.md & {
padding: 3px 0px 0px 2px;
}
.ios & {
padding: 0px;
}
}
}
</style>
I've tried:
.vue-tinder { border-radius: 0px !important; }
But didn't work.
Hey shanlh, I hope you are well.
We, in our company, made an ecommerce app using Vuetify.js, and one of feature we are developing is a tinder-like clothes showroom (you can check a brief preview here) with idea to get feedback from our customer.
The issue is, comparing with your demo playground, the animations when press buttons using documented APIs. Adittionaly, rewind feature don't show badge when press button, I want to know how to do to make work vue-tinder with vuetify, I'm sure thats the problem.
Regards.
<vue-tinder ref="tinder" key-name="key" :queue.sync="recommendList" :offset-y="10" :pointerThreshold="0.2" :superThreshold="0.2" @submit="onClerkStackChange"> <router-link slot-scope="{index, status, data}" :to="'/clerk/detail/'+ data.id"> <div class="picture" :style="{ 'background-image':
url(${recommendList[index].avatarUrl}) }"> <img v-if="data.grade == 2 || data.grade == 3" class="grade" :src="
/static/images/grade_badge_${data.grade}.png" /> </div> </router-link> </vue-tinder>
Hello.
I have followed the guide published by you (https://shanlh.github.io/vue-tinder/guide/bing-images.html), but when loading the page, the page appears blank with the following error in the console:
http://prntscr.com/uwbry1
Thanks in advance.
I have a big issue (with Vue3): when I provide a queue
with a getter of my store, the tinder breaks.
After analyzing the Tinder code, it seems that the cards are not a direct representation of the queue
but of a list
internally built as a copy of the queue
, and updated every time the queue
changes thanks to a watch
on the queue
.
The issue is that there is a breaking change with Vue3:
BREAKING: When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the deep option must be specified. https://v3.vuejs.org/guide/migration/watch.html#overview
vue-tinder/src/components/vue-tinder/Tinder.vue
Lines 220 to 227 in add9d84
If we replace this code by the following, it works well:
watch: {
queue: {
handler(val) {
const keyName = this.keyName
const newKeys = val.map(item => item[keyName])
const oldKeys = this.list.map(item => item[keyName])
this.diff(newKeys, oldKeys)
},
deep: true
}
}
But from what I read, "deep watchers" are the devil...
The rule is simple — do not use a deep modifier, and do not watch non-primitive-type variables at all. https://codeburst.io/5-vue-performance-tips-98e184338439
I observed that there is a update:queue
event emitted every time the queue changes. It is not documented officially, but it's there. Perhaps it would be a good place to do the same diff
operation?
Or perhaps, it would be even "cleaner" to simply create a method accessible on the Tinder instance, that the developper will trigger every time the queue is updated?
What do you think?
<vue-tinder key-name="id" :queue.sync="queue" @submit="fetchMoreNews" style="width: 295px; height: 450px;"> <template slot-scope="scope"> <news-item :key="scope.data.id" :detail="scope.data" class="border-none mb-0"></news-item> </template> </vue-tinder>
发布到正式站,报错:“请设置vue-tinder的宽高”
Hello, thanks for this amazing plugin!
I read that there is the possibility to disable the "super like" function, but this doesn't mean that it stops the user to swipe up right? is it possible that it stops doing that? kinda like it bounces back down? and just allows them to swipe left/right
Hi
I show you my app based in your amazing plugin
https://github.com/jjmontalban/filmder-front
Best regards
I'm just starting to get this working. However, I see the following error being repeated a few times. Buttons are showing on the page but no images are shown.
ERROR [Vue warn]: <transition-group> children must be keyed: <TinderCard>
Trying to work with the sample.
Any ideas?
Hello, hope you are well.
We need to add a down functionailty to your component but can;t get it to work.
Can you help?
Congratulatioins on the component!!! Nice job.
Felipe
Hi,
I tried installing vue-tinder on my project. However, some attributes seem to have been deprecated in Vue v3 (slot-scope
, slot
and queue.sync
)
I tried updating those on my end, but Vue throws a warning Unhandled error during execution of scheduler flush
.
Do you have any idea about what might have happened ?
Also, I can't fix a warning triggered by Vetur saying
Could not find a declaration file for module 'vue-tinder'. '/Users/fabienrahaingomanana/Desktop/citouci/node_modules/vue-tinder/lib/vue-tinder.js' implicitly has an 'any' type.
Trynpm i --save-dev @types/vue-tinder
if it exists or add a new declaration (.d.ts) file containingdeclare module 'vue-tinder';
I tried adding a file called global.d.ts
and running the suggested command. But nothing worked.
This is not an issue but request. The decide function should return full item so I can use other information about the card also. I am gonna check the code and see if I can make pull request.
Hi.
I think that you could add more photos in the current object, that is, that you can see more photos in carousel format for the object you are currently viewing.
I do not know if I have explained myself properly, but this is implemented by Tinder and other applications.
Thanks.
Getting error 请设置vue-tinder的宽高 while all the css variables are set as per the sandbox. Am I missing something ?
\
Hi, I wanna thank you for this wonderful library and ask for translate docs, examples an error messages to english. Ok, I'm from Brazil and my primary language is portuguese, but english seems to be the common language for open source projects and development.
Hello,I tried to use your component but it tells me to set the height and the width.
I'm using the alpha version for Vue 3 and I've put it in a component.
It works when I put it the App.vue directly like your example in https://github.com/shanlh/vue-tinder/blob/next/src/App.vue .
Thank your for your help.
Hi, im playing with this amazing plugin a few days.
So my question is the same as in title. For example:
I want to rename 'nope' event to 'dislike'. Is there any way to accomplish this? @click events are renamed as i need, But when you swipe, the events remain standard
Is there any way to get the slot opacity value for the card when I swipe the card? I want to add some event, when slots are shown
为什么在uniapp端运行不起来
The card can't be touched while it returns to its original position after being moved to either side
作者,您好!我现在右滑移除卡片之后因为某些判定问题把移除的卡片添加到了数组的第一项之后卡片滑动就失效了,不能滑动,请问这个问题你有解决方法吗?
您好,请问在vue-cli构建项目上如何使用?我找不到全局注册的方式
Hi,
how can I remove the symbols?
Klaus
Now, if you want to click on a card to open a link or detail, we need to set the click on a certain element, because if we add it to the card, when we are dragging it, it will automatically click instead of just swipe to the selected side and the card will disappear.
A event or even the possibility to be able to click on a card would bring more possibilities for the component.
I tried to use it using the example provided for vue 3 but it doesn't render anything inside <div class="vue-tinder"></div>
Hey! What can cause a problem where touches work for some time but then suddenly do not anymore? I tried debugging but I can not find a place where it stops working. I found out that both start
and move
functions do return values. Just that the card itself won't be affected by the changes.
Does my case go under one of the following descriptions I found from TODO list in README.
For me it seems like it does not have to be completed operation nor in sync mode to reproduce the second item in the list.
These are my parameters on vue-tinder itself:
<vue-tinder
v-if="items.length > 0"
ref="tinder"
:allow-super="true"
key-name="id"
:pointer-threshold="1.0"
:super-threshold="1.0"
:queue.sync="items"
@submit="submit"
@update:queue="onListUpdate"
/>
Here is illustration about this:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.