Question

我正在使用离子卡，并且在滚动时遇到一些问题。

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

我想继续在页面上使用离子卡。这是我的代码

.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>

离子卡滚动错误

1 个答案: