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

【问题标题】：Ion-slides with form inputs blocks page scrolling带有表单输入的离子幻灯片阻止页面滚动
【发布时间】：2016-10-26 10:02:44
【问题描述】：

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

【问题讨论】：

标签： ionic-framework

【解决方案1】：

我遇到了同样的问题，并在 ionic 论坛上找到了一个解决方案，方法是在 ion-slide 中使用 ion-content，它现在对我有用。

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>

【讨论】：

【解决方案2】：

帮助我解决同样问题的方法是将scrollAssist: false 放入我的 app.module.ts 中，如下所示：

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

【讨论】：