Почему я не могу прокрутить мое приложение в IONIC

Question

Я создал небольшое приложение в каркасе IONIC, у меня есть 3 вкладки, я создал скользящие вкладки влево и вправо. Но моя проблема в том, что я не могу прокрутить свою карту на первой вкладке.

КОД:

Я попытался изменить ion content scroll от ложного к истине, но когда я делаю это, когда я прокрутку также панели вкладок двигаться с моим текстовым содержанием.

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