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

Popular posts from this blog

Your app currently targets API level 27 and must target at least API level 28 to ensure it is built on the latest APIs optimized for security and performance. Change your app's target API level to at least 28

ionic project creation

change root user in ubuntu