为什么我无法在 IONIC 中滚动我的应用程序

Question

我在 IONIC 框架中创建了一个小应用程序，我有 3 个选项卡，我创建了左右滑动选项卡。但我的问题是我无法在第一个选项卡中滚动我的卡片。

代码：

我尝试将其ion content scroll从 false 更改为 true，但是当我滚动时，选项卡栏也会随着我的文本内容移动。

<ion-content scroll="false" class="has-subheader">

    <ion-slide-box show-pager="false" ion-slide-tabs>
        <ion-slide ion-slide-tab-label="TOP">
            <div class="list card ">

  <div class="item item-avatar">
    <img src="img/pic1.jpg">
    <h2>Author name</h2>
  </div>

  <div class="item item-body">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum, elit non scelerisque tincidunt, magna ligula elementum lectus, eget tempor dolor nisl at mauris. Curabitur eget ultrices ligula.
    </p>
    <img class="full-image" src="img/pic2.jpg">
    <p>
      <a href="#" class="subdued">1 Like</a>
      <a href="#" class="subdued">5 Comments</a>
    </p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="#">
      <i class="icon ion-thumbsup"></i>
      Like
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-chatbox"></i>
      Comment
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-share"></i>
      Share
    </a>
  </div>

Answer 1

您需要在 ion-slide 之后添加 ion-content 或 ion-scroll。基本上 ion-slide-box 是在页面之间滑动的容器（ion-slide）。 ion-slide 代表各个页面，每个页面都应该有 ion-content、ion-item、ion-scroll。其中任何一个都应该有效

 <ion-slide-box>
           <ion-slide> <!--page1-->
            <ion-content>
              <div class="list card ">
                <div class="item item-avatar">
                  <img src="img/pic1.jpg">
                  <h2>Author name</h2>
                </div>
              </div>
            </ion-content>
           </ion-slide>
         <ion-slide> <!--page2-->
            <ion-content>
              <div class="list card ">
                <div class="item item-avatar">
                  <img src="img/pic1.jpg">
                  <h2>Author name</h2>
                </div>
              </div>
            </ion-content>
           </ion-slide>
</ion-slide-box>