Question

我想拥有一种类似于Shazam的垂直滑动式卡片功能，该卡片可以上下堆叠并且不会像Tinder那样消失。我正在尝试按照tutorial中所述在Ionic 2中实现angular2-swing。但这只有左右滑动选项，下面的代码

如何修改我的代码或使用纯JavaScript或离子手势等，以便获得垂直滑动卡，例如下面的图像

控制器

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;
}

查看

<ion-content padding>
<div swing-stack #myswing1 [stackConfig]="stackConfig" (throwoutleft)="voteUp(true)" (throwoutright)="voteUp(false)" id="card-stack">
    <ion-card #mycards1 swing-card *ngFor="let c of cards">
      <ion-item *ngIf="c.picture">
        <ion-avatar item-left>
          <img *ngIf="c.picture"[src]="c.picture.medium">
        </ion-avatar>
        <h2>{{ c.name.first }} {{ c.name.last}}</h2>
        <p>{{ c.email }}</p>
      </ion-item>

      <ion-card-content *ngIf="c.location">
        From: {{ c.location.city }}, {{ c.location.postcode }}<br>
        Phone: {{ c.phone }}
      </ion-card-content>

      <ion-row *ngIf="c.name">
        <ion-col>
          <button ion-button clear small icon-left color="primary" (click)="voteUp(true)">
            <ion-icon name="thumbs-up"></ion-icon>
            Yes
          </button>
        </ion-col>
        <ion-col>
          <button ion-button clear small icon-left color="primary" (click)="voteUp(false)">
            <ion-icon name="thumbs-down"></ion-icon>
            No
          </button>
        </ion-col>
      </ion-row>
    </ion-card>
  </div>
  <p style="text-align: center; width: 100%;">{{ recentCard }}</p>
</ion-content>

CSS

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%;
  }
}

Answer 1

将此配置添加到您的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;
  }
}

Ionic 2 / Angular 2中的垂直刷卡

1 个答案: