android - ionic ionic 卡滚动错误

Question

我正在使用 Ionic 卡，但滚动时遇到一些问题。

我的页面上有三张不同的卡片，当我向下滚动时，它不会滚动回顶部的第一张卡片或第二张卡片。我应该怎么做才能解决我的问题？

我很乐意继续在页面中使用 Ionic ionic 卡。这是我的代码

.welcome-card ion-img {
  max-height: 200vh;
  overflow: hidden;
}
.NewAtATAM ion-img {
  max-height: 200vh;
  overflow: hidden;
}

.SignupforMusiclessons ion-img {
  max-height: 600vh;
  overflow: hidden;
}

.Signupforsummercamp ion-img {
  max-height: 200vh;
  overflow: hidden;
}
.fixed-header{
  margin-top:43px;
}

.platform-webview.platform-ios.platform-cordova .fixed-header{
  margin-top:63px;

}

<ion-header>
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content scroll=true>
    <ion-card class="welcome-card">
      <ion-img src="/assets/shapes.svg"></ion-img>
      <ion-card-header>
        <ion-card-title>Welcome to ATAM</ion-card-title>
      </ion-card-header>
      <ion-card-content>
ATAM is the Original Learning Center for Everything Technology, Art, Music and Recording. We blend creativity with genius, and foster entrepreneurship.
 ATAM offers a huge variety of ways to learn through private instruction, group classes, advanced STEM/STEAM camps and through experimental game play.
 </ion-card-content>
    </ion-card>

<ion-content scroll=true>
<ion-card class="NewAtATAM">
  <ion-img src="/assets/newatatam.jpg"></ion-img>
  <ion-card-header>
   <ion-card-title>New At ATAM</ion-card-title>
</ion-card-header>
  </ion-card>

<ion-content scroll=true>
    <ion-card class="SignupforMusiclessons">
      <ion-img src="/assets/newatatam.jpg" padding></ion-img>
      <ion-card-header>
        <ion-card-title>Sign Up For Music Lessons</ion-card-title>
        </ion-card-header>
      <ion-card-content>
acoustic - electric - music production - recording
ATAM Music Department teaches over 30 instruments, acoustic and digital, as well as music production and professional recording. Sign up now!
Private lessons are Monday through Saturday
12pm to 8pm
      </ion-card-content>
</ion-card>


    <ion-content scroll=true>
    <ion-card class="Signupforsummercamp">
      <ion-img src="/assets/summercamp.jpg"></ion-img>
      <ion-card-header>
        <ion-card-title>Sign Up For Summer Camp</ion-card-title>
        </ion-card-header>
      <ion-card-content>
summer 2019 - tech- sports - art - music - field trips
Come experience ATAM Tech and Outdoor Summer Camp. The best of all worlds, combining tech, art, music, sports and field trips!
When: Monday-Friday, 8:30am to 3:30pm
June 10 - August 30
After Care Hours: 3:30 to 7:30.
      </ion-card-content>
</ion-card>
    </ion-content>

<ion-content>
    <ion-list lines="none">
      <ion-list-header>
        <ion-label>Resources</ion-label>
      </ion-list-header>
      <ion-item href="https://ionicframework.com/docs/">
        <ion-icon slot="start" color="medium" name="book"></ion-icon>
        <ion-label>Ionic Documentation</ion-label>
      </ion-item>
      <ion-item href="https://ionicframework.com/docs/building/scaffolding">
        <ion-icon slot="start" color="medium" name="build"></ion-icon>
        <ion-label>Scaffold Out Your App</ion-label>
      </ion-item>
      <ion-item href="https://ionicframework.com/docs/layout/structure">
        <ion-icon slot="start" color="medium" name="grid"></ion-icon>
        <ion-label>Change Your App Layout</ion-label>
      </ion-item>
      <ion-item href="https://ionicframework.com/docs/theming/basics">
        <ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
        <ion-label>Theme Your App</ion-label>
      </ion-item>
    </ion-list>
</ion-content>

Answer 1

像这样只使用ion-content一次，然后删除scroll=true:

 <ion-content>
 <ion-card>
  Keep close to Nature's heart... and break clear away, once in awhile,
    and climb a mountain or spend a week in the woods.  
 </ion-card>
...your other cards here just open and close ion-card like this dont use ion-content
<ion-card>
</ion-card>
</ion-content>