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>

Answer 2

在完全相同的问题上帮助我的事情是，将scrollAssist: false放在我的app.module.ts中，就像这样：

IonicModule.forRoot(MyApp, { scrollAssist: false, tabsHideOnSubPages: true }),

带有表单输入的离子幻灯片阻止页面滚动

2 个答案: