Question

我正在研究Ionic项目，在我们的一个视图中，我们在子标题中有一个输入字段。使用此输入字段，用户可以搜索显示在离子列表中的其他用户。

我遇到的问题是，当键盘出现时，它实际上隐藏了离子列表的一部分。从Ionic文档中读取键盘文档后，我认为问题是由于子标题输入字段和离子列表不属于同一可滚动区域而引起的。

有什么方法可以解决这个问题吗？

以下是代码的相关部分：

<ion-header-bar align-title="left" class="bar-light bar-subheader item-input-inset">
    <div class="item-input-wrapper">
        <i class="icon ion-ios-search placeholder-icon"></i>
        <input type="search" placeholder="Search" ng-model="searchUsers" ng-change="showUsersSuggestions($event);" ng-focus="enableSearch(true)" ng-blur="enableSearch(false)">
        <button class="button button-clear clear-search icon ion-ios-close-empty" ng-click="clearSearch()"></button>
    </div>
</ion-header-bar>

<ion-content>
    <ion-list can-swipe="true" ng-if="showSearchResults">
        <ion-item class="item item-divider list-result" style="border-top:0;">
            Search results
        </ion-item>
        <ion-item class="item item-avatar item-icon-right item-text-wrap list-result" ng-show="searchUsers && searchUsers.length >= 3 && usersSuggestions" ng-repeat="f in usersSuggestions">
            <img ng-src="{{getAvatarUrl(f)}}" width="40" height="40" ng-click="showProfileInfo(f)">
            <h2 ng-show="f.displayName" ng-click="showProfileInfo(f)">{{f.displayName}}</h2>
            <p ng-click="showProfileInfo(f)">{{f.email}}</p>
        </ion-item>
    </ion-list>
    ......
</ion-content>

Answer 1

我找到解决此问题的唯一方法是在内容触摸事件上关闭键盘..

<ion-content class="has-subheader" on-touch="hideKeyboard()">
    ...
</ion-content>

scope.hideKeyboard = function() {
    $cordovaKeyboard.close()
};

Answer 2

...
</ion-content>

    <div keyboard-attach>
    </div>

</ion-view>

我刚用键盘连接添加了这个div。离子文档说键盘连接仅适用于页脚，但它对我有用。我在iOS9上测试过。

离子：关注子标题上的输入字段使键盘隐藏列表元素

2 个答案: