ionic tinder ui
<ion-content>
<ion-card *ngFor="let card of cards1" style="width:100%"
[style.position]="'absolute'">
<ion-card-header>
<ion-card-title>
<img [src]="card.img" [style.width]="'100%'">
<h3>{{ card.title }}</h3>
<p>{{ card.description }}</p>
<p>ID:{{card.ID}}</p>
</ion-card-title>
</ion-card-header>
</ion-card>
</ion-content>
loadTinderCards() {
this.cards1 = [
{ID:0,
img: "https://placeimg.com/300/300/people",
title: "Demo card 1",
description: "This is a demo for Tinder like swipe cards"
},
{
ID:0,
img: "https://placeimg.com/300/300/animals",
title: "Demo card 2",
description: "This is a demo for Tinder like swipe cards"
},
{ID:0,
img: "https://placeimg.com/300/300/nature",
title: "Demo card 3",
description: "This is a demo for Tinder like swipe cards"
},
{
ID:0,
img: "https://placeimg.com/300/300/tech",
title: "Demo card 4",
description: "This is a demo for Tinder like swipe cards"
},
{ID:0,
img: "https://placeimg.com/300/300/arch",
title: "Demo card 5",
description: "This is a demo for Tinder like swipe cards"
}
]
}
ngAfterViewInit() {
const cardArray = this.cards.toArray();
// this.useLongPress(cardArray)
this.useTinderSwipe(cardArray);
}
useLongPress(cardArray) {
for (let i = 0; i < cardArray.length; i++){
console.log('index', i);
const card = cardArray[i];
console.log('card', card);
const gesture = this.gestureCtrl.create({
el: card.nativeElement,
threshold: 15,
gestureName: 'long-press',
onStart: ev => {
console.log(ev);
this.longPressActive = true;
this.increasePower(i);
},
onEnd: ev => {
console.log(ev);
this.longPressActive = false;
}
});
gesture.enable(true);
}
}
increasePower(i) {
console.log("increase")
setTimeout(() => {
if (this.longPressActive) {
this.zone.run(() => {
this.cards1[i].ID++;
this.increasePower(i);
})
}
})
}
useTinderSwipe(cardArray) {
for (let i = 0; i < cardArray.length; i++){
console.log('index', i);
const card = cardArray[i];
console.log('card', card);
const gesture: Gesture = this.gestureCtrl.create({
el: card.nativeElement,
gestureName: 'swipe',
onStart: ev => {
console.log(ev);
},
onMove: ev => {
console.log(ev);
card.nativeElement.style.transform = `translateX(${ev.deltaX}px) rotate(${ev.deltaX /10}deg)`;
},
onEnd: ev => {
console.log(ev);
card.nativeElement.style.transform = '3.5s ease-out';
if (ev.deltaX > 150) {
card.nativeElement.style.transform = `translateX(${this.plt.width() *2 }px) rotate(${ev.deltaX /2}deg)`;
} else if (ev.deltaX < -150) {
card.nativeElement.style.transform = `translateX(-${this.plt.width() *2 }px) rotate(${ev.deltaX /2}deg)`;
} else {
card.nativeElement.style.transform = '';
}
}
});
gesture.enable(true);
}
}
import { Gesture, GestureController, IonCard, MenuController, Platform }
from '@ionic/angular';
implements AfterViewInit
Comments
Post a Comment