以离子形式滚动

Question

这是我的一个简单表单 application.When 试图在表单中输入用户详细信息 android 键盘隐藏了电子邮件字段，手机号码 field.I 无法滚动页面 upwards.Please 给我一个解决方案

<ion-content>
  <form novalidate="novalidate" on-valid-submit="saveUserDetails()">
    <div class="list card">
      <label class="item item-input validated">
        <span class="input-label">First Name</span>
        <input type="text" ng-model="user.firstName" required="required" name="firstName" autocomplete="off" class="textclr">
      </label>
      <label class="item item-input validated">
        <span class="input-label">Last Name</span>
        <input type="text" ng-model="user.lastName" required="required" name="lastName" class="textclr">
      </label>
      <label class="item item-input validated">
        <span class="input-label">Email</span>
        <input type="email" ng-model="user.email" required="required" name="email" class="textclr">
        <i class="icon ion-alert-circled error col col-10"></i>
      </label>
      <label class="item item-input validated">
        <span class="input-label">Mobile</span>
        <input type="tel" ng-model="user.mobile" name="number" required="required" class="textclr">
      </label>
    </div>
    <div class="padding">
      <button type="submit" class="button button-block button-positive activated">
        Save user
      </button>
    </div>
  </form>
  <ion-content>

Answer 1

您可以使用 ion-scroll-delegate 在键盘显示上手动向上滚动。例如：

angular.module('MyApp')

.run([
  '$rootScope',
  '$ionicPlatform',
  '$window',
  function(
    '$ionicPlatform',
    '$rootScope',
    '$window') {

    $ionicPlatform.ready().then(function() {

      function keyboardHandler(event) {
        $rootScope.$broadcast(event);
      }

      $window.addEventListener('native.keyboardshow', keyboardHandler('native.keyboardshow'));
      $window.addEventListener('native.keyboardhide', keyboardHandler('native.keyboardhide'));
    });
  }
])

.controller('formCtrl', [
  '$ionicScrollDelegate',
  '$rootScope',
  function(
    $ionicScrollDelegate,
    $rootScope) {

    var scroller = $ionicScrollDelegate.getByHandle('my-form');

    $rootScope.on('native.keyboardshow', function(event, data) {
      scroller.scrollBottom(); //resize() will work too.
    });

    $rootScope.on('native.keyboardhide', function(event, data) {
      scroller.scrollTop(); //resize() works here as well
    });

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ion-content delegate-handle="my-form">
  <form novalidate="novalidate" on-valid-submit="saveUserDetails()">
    <div class="list card">
      <label class="item item-input validated">
        <span class="input-label">First Name</span>
        <input type="text" ng-model="user.firstName" required="required" name="firstName" autocomplete="off" class="textclr">
      </label>
      <label class="item item-input validated">
        <span class="input-label">Last Name</span>
        <input type="text" ng-model="user.lastName" required="required" name="lastName" class="textclr">
      </label>
      <label class="item item-input validated">
        <span class="input-label">Email</span>
        <input type="email" ng-model="user.email" required="required" name="email" class="textclr">
        <i class="icon ion-alert-circled error col col-10"></i>
      </label>
      <label class="item item-input validated">
        <span class="input-label">Mobile</span>
        <input type="tel" ng-model="user.mobile" name="number" required="required" class="textclr">
      </label>
    </div>
    <div class="padding">
      <button type="submit" class="button button-block button-positive activated">
        Save user
      </button>
    </div>
  </form>
  <ion-content>

您需要安装键盘插件：

https://github.com/driftyco/ionic-plugin-keyboard

Answer 2

在您的 app.js 文件中，添加以下文本行。我已将此代码添加到 app.js

中名为“运行”的函数中

ionic.Platform.isFullScreen = true;

$ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
 ionic.Platform.isFullScreen = true;
  });
})

第 2 步是将离子键盘插件包含在您的 phonegap config.xml 文件中。这是您需要包含的代码行：

<gap:plugin name="com.ionic.keyboard" />

以离子形式滚动

Scrolling in ionic form

html

angularjs

cordova

ionic-framework

ionic