Question

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

CODE：

我尝试将此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-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>

Answer 2

将您的内容放在幻灯片中，将标签放在内容之外，这样它们就不会滚动。我已经从我做的一个项目中加入了一个例子。无论您想要滚动内容都包含在内容中。如果你不想滚动它把它放在内容之外。如果您有任何疑问，请与我联系。

<ion-slide>
            <div ng-if="uploadList" class="bar bar-header bar-positive">
                <button ng-click="GoBack()" class="button button-clear button-light icon-left ion-chevron-left">Go Back</button>
            </div>
            <div ng-if="uploadList == false" class="bar bar-header bar-positive">
                <button ng-click="Cancel()" class="button button-clear button-light icon-left ion-chevron-left">Cancel</button>
            </div>
            <ion-content class="has-header has-footer">
                <div ng-if="showuploads && uploadList" ng-repeat="item in uploads" class="list card">
                    <div style="background-color:#284f9a !important; color: white !important; font-size: 24px;" class="item">
                        <i class="icon icon-left ion-checkmark-circled" style="color:green"></i>
                        {{item.DocTypeName}}
                    </div>
                    <div class="item">
                        Order: {{item.Value}}
                    </div>
                    <div class="item">
                        Driver ID: {{item.UploadUser}}
                    </div>
                    <div class="item">
                        Upload Date: {{item.UploadDate}}-{{item.UploadTime}}
                    </div>
                    <div class="item item-image">
                        <img src="{{item.Image}}" />
                    </div>
                </div>
                <div ng-if="!showuploads && uploadList" class="list card">
                    <div style="background-color:#284f9a !important; color: white !important; font-size: 24px;" class="item">
                        No Previous Uploads
                    </div>
                    <div class="item item-text-wrap center">
                        <span ng-if="!showuploads">Click the take photo button below to capture your document. After you take the picture, select the document type from the shown list. Then hit the upload document button to submit your document. At any point you can retake the photo or change the document type using the take photo button, or the doc type button.</span>
                    </div>
                </div>
                <div ng-if="uploadList == false" class="list card">
                    <div class="item item-image">
                        <img class="podImg" src="{{image}}" />
                    </div>
                    <div class="item center">
                        DOC Type: {{DocTypeName}}
                    </div>
                </div>
            </ion-content>
            <div style="background-color:#284f9a !important; color: white !important;" class="tabs tabs-icon-top">
                <a ng-click="takePhoto()" class="tab-item">
                    <i class="icon ion-camera"></i>
                    Take Photo
                </a>
                <a ng-click="UploadDoc()" class="tab-item">
                    <i class="icon ion-arrow-up-a"></i>
                    Upload Doc
                </a>
                <a ng-click="openModal()" class="tab-item">
                    <i class="icon ion-document-text"></i>
                    Doc Type
                </a>
            </div>
        </ion-slide>

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

2 个答案: