Ошибки прокрутки ионных ионных карт - PullRequest
0 голосов
/ 03 июня 2019

Я использую ионные карты, и у меня возникают некоторые проблемы с прокруткой.

У меня есть три разные карточки на странице, и когда я прокручиваю вниз, она не прокручивается назад к верхней первой или второй. Что я должен сделать, чтобы исправить мою проблему?

Я бы хотел продолжать использовать ионные ионные карты для страниц. Вот мой код

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

1 Ответ

0 голосов
/ 04 июня 2019

использовать ионное содержимое только один раз, как это, и удалить свиток = 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...