带有窗体输入块的离子滑块页面滚动

Question

我在<ion-slide >中有几个窗体输入，但是我无法滚动查看幻灯片中的所有字段，它阻止了我在幻灯片内滚动。在设备上，当有离子输入时，离子列表滚动行为不起作用。

还有一些CSS问题与标签重叠（请参阅下面的img）...我使用Ionic v 1.3。

<ion-view scroll="true"> 
     <ion-nav-bar class="bar-light"> 

      <ion-nav-buttons side="left"> 
       <button class="button button-positive button-clear no-animation" 
         ng-click="startApp()" ng-show="!slideIndex"> 
       Skip 
       </button> 
       <button class="button button-positive button-clear no-animation" 
         ng-click="previous()" ng-show="slideIndex > 0"> 
       Previous 
       </button> 
      </ion-nav-buttons> 
      <ion-nav-buttons side="right"> 
       <button class="button button-positive button-clear no-animation" 
         ng-click="next()" ng-show="slideIndex != 2"> 
       Next 
       </button> 
       <button class="button button-positive button-clear no-animation" 
         ng-click="startApp()" ng-show="slideIndex == 2"> 
       Finish 
       </button> 
      </ion-nav-buttons> 

     </ion-nav-bar> 

     <ion-slide-box on-slide-changed="slideChanged(index)" scroll="true"> 

      <ion-slide scroll="true"> 


      <h3>Start </h3> 

      <div class="list"> 

       <label class="item item-input item-stacked-label"> 
       <span class="input-label">First Name</span> 
       <input type="text" placeholder="John"> 
       </label> 
       <label class="item item-input item-stacked-label"> 
       <span class="input-label">Last Name</span> 
       <input type="text" placeholder="Suhr"> 
       </label> 
       <label class="item item-input item-stacked-label"> 
       <span class="input-label">Email</span> 
       <input type="text" placeholder="john@suhr.com"> 
       </label> 
       <label class="item item-input item-stacked-label"> 
       <span class="input-label">Email (use your gym email)</span> 
       <input type="text" placeholder="john@suhr.com"> 
       </label> 
       <label class="item item-input item-select"> 
        <div class="input-label"> 
         Select your Gym Location 
        </div> 
        <select> 
         <option>FitnFast KellyVille</option> 
        </select> 
       </label> 


      </div> 




      </ion-slide> 

      <ion-slide> 
      <h3>Using Awesome</h3> 

      <div id="list"> 
       <h5>Just three steps:</h5> 
       <ol> 
       <li>Be awesome</li> 
       <li>Stay awesome</li> 
       <li>There is no step 3</li> 
       </ol> 
      </div> 
      </ion-slide> 

      <ion-slide> 
      <h3>Any questions?</h3> 
      <p> 
       Too bad! 
      </p> 
      </ion-slide> 

     </ion-slide-box> 
     </ion-view> 

Answer 1

我有同样的问题，并通过使用离子滑盖内部的离子含量的离子论坛上发现了一个解决方案，它现在是为我工作。

https://github.com/driftyco/ionic/issues/5297

<ion-view> 
    <ion-content scroll="false"> 
    <ion-slide-box> 
     <ion-slide> 
     <ion-content> 
      <div class="box blue"><h1>BLUE</h1></div> 
     </ion-content> 
     </ion-slide> 
     <ion-slide> 
     <ion-content> 
      <div class="box yellow"><h1>YELLOW</h1></div> 
     </ion-content> 
     </ion-slide> 
     <ion-slide> 
     <ion-content> 
      <div class="box pink"><h1>PINK</h1></div> 
     </ion-content> 
     </ion-slide> 
    </ion-slide-box> 
    </ion-content> 
</ion-view>