Ionic 2/Angular 2中的垂直刷卡
我想有一个垂直刷卡功能类似于沙扎姆,在那里卡堆叠或下降,并没有消失像火绒。我正试图在离子2中实现angular2 swing,如本文所述。但它只有左右滑动选项,代码如下 如何修改我的代码或使用纯javascript或Ionic手势等,以获得如下图所示的垂直刷卡 控制器Ionic 2/Angular 2中的垂直刷卡,angular,ionic-framework,ionic2,Angular,Ionic Framework,Ionic2,我想有一个垂直刷卡功能类似于沙扎姆,在那里卡堆叠或下降,并没有消失像火绒。我正试图在离子2中实现angular2 swing,如本文所述。但它只有左右滑动选项,代码如下 如何修改我的代码或使用纯javascript或Ionic手势等,以获得如下图所示的垂直刷卡 控制器 import { StackConfig, Stack, Card, ThrowEvent, DragEvent, SwingStackComponent, SwingCardComponent} fr
import {
StackConfig,
Stack,
Card,
ThrowEvent,
DragEvent,
SwingStackComponent,
SwingCardComponent} from 'angular2-swing';
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
@ViewChild('myswing1') swingStack: SwingStackComponent;
@ViewChildren('mycards1') swingCards: QueryList<SwingCardComponent>;
cards: Array<any>;
stackConfig: StackConfig;
recentCard: string = '';
constructor(private http: Http) {
this.stackConfig = {
throwOutConfidence: (offsetX, offsetY, element) => {
return Math.min(Math.abs(offsetX) / (element.offsetWidth/2), 1);
},
transform: (element, x, y, r) => {
this.onItemMove(element, x, y, r);
},
throwOutDistance: (d) => {
return 800;
}
};
}
ngAfterViewInit() {
// Either subscribe in controller or set in HTML
this.swingStack.throwin.subscribe((event: DragEvent) => {
event.target.style.background = '#ffffff';
});
this.cards = [{email: ''}];
this.addNewCards(1);
}
}
// Called whenever we drag an element
onItemMove(element, x, y, r) {
var color = '';
var abs = Math.abs(x);
let min = Math.trunc(Math.min(16*16 - abs, 16*16));
let hexCode = this.decimalToHex(min, 2);
if (x < 0) {
color = '#FF' + hexCode + hexCode;
} else {
color = '#' + hexCode + 'FF' + hexCode;
}
element.style.background = color;
element.style['transform'] = `translate3d(0, 0, 0) translate(${x}px, ${y}px) rotate(${r}deg)`;
}
// Connected through HTML
voteUp(like: boolean) {
let removedCard = this.cards.pop();
this.addNewCards(1);
if (like) {
this.recentCard = 'You liked: ' + removedCard.email;
} else {
this.recentCard = 'You disliked: ' + removedCard.email;
}
}
// Add new cards to our array
addNewCards(count: number) {
this.http.get('https://randomuser.me/api/?results=' + count)
.map(data => data.json().results)
.subscribe(result => {
for (let val of result) {
this.cards.push(val);
}
})
}
// http://stackoverflow.com/questions/57803/how-to-convert-decimal-to-hex-in-javascript
decimalToHex(d, padding) {
var hex = Number(d).toString(16);
padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;
while (hex.length < padding) {
hex = "0" + hex;
}
return hex;
}
在stackConfig allowedDirections中添加此配置:
this.stackConfig = {
allowedDirections: [Direction.UP, Direction.DOWN, Direction.LEFT, Direction.RIGHT],
throwOutConfidence: (offsetX, offsetY, element) => {
return Math.min(Math.max(Math.abs(offsetX) / (element.offsetWidth / 1.7), Math.abs(offsetY) / (element.offsetHeight / 2)), 1);
},
transform: (element, x, y, r) => {
this.onItemMove(element, x, y, r);
},
throwOutDistance: (d) => {
return 800;
}
}
page-home {
#card-stack {
width: 90%;
height: 200px;
background: #047915;
border: 10px solid #4cb338;
margin: 100px auto 0;
position: relative;
}
#card-stack ion-card {
border-radius: 5px;
position: absolute;
text-align: center;
top: 3%;
height: 90%;
}
}
this.stackConfig = {
allowedDirections: [Direction.UP, Direction.DOWN, Direction.LEFT, Direction.RIGHT],
throwOutConfidence: (offsetX, offsetY, element) => {
return Math.min(Math.max(Math.abs(offsetX) / (element.offsetWidth / 1.7), Math.abs(offsetY) / (element.offsetHeight / 2)), 1);
},
transform: (element, x, y, r) => {
this.onItemMove(element, x, y, r);
},
throwOutDistance: (d) => {
return 800;
}
}