Angularjs 离子含量赢了';当键盘出现时,不能调整大小
我有一个带有聊天功能的应用程序,它工作得很好,除了一个部分,当键盘出现时,ion内容的大小不会调整到适当的高度,所以当我想滚动到顶部时,标题会完全消失,我被卡住了。视图有一个页眉、内容和页脚,我想要的是页脚显示在键盘上方,并且要调整内容大小,使其适合页眉和页脚栏。我创建的视图如下所示:Angularjs 离子含量赢了';当键盘出现时,不能调整大小,angularjs,keyboard,ionic-framework,ionic,Angularjs,Keyboard,Ionic Framework,Ionic,我有一个带有聊天功能的应用程序,它工作得很好,除了一个部分,当键盘出现时,ion内容的大小不会调整到适当的高度,所以当我想滚动到顶部时,标题会完全消失,我被卡住了。视图有一个页眉、内容和页脚,我想要的是页脚显示在键盘上方,并且要调整内容大小,使其适合页眉和页脚栏。我创建的视图如下所示: <ion-view id="userMessagesView" cache-view="true" flow-init flow-name="imageTemp.imageTemp" ng-if="!inC
<ion-view id="userMessagesView" cache-view="true" flow-init flow-name="imageTemp.imageTemp" ng-if="!inChatSettings">
<div class="loader-center" ng-if="!doneLoading">
<div class="loader">
<i class="icon ion-loading-c"></i>
</div>
</div>
<div class="loader-center" ng-if="errorLoading">
<div class="loader">{{'error_loading_messages'|translate}}</div>
</div>
<ion-content class="has-header has-footer" has-bouncing="true" delegate-handle="userMessageScroll" style="background:red;">
<ion-refresher pulling-text="{{'pull_load_earlier'|translate}}" on-refresh="loadMore()"></ion-refresher>
<div ng-repeat="message in messageThread.messages | orderBy : 'postDate'" class="message-wrapper">
<div class="chat-bubble" ng-class="{ false: 'left', true:'right'}[{{message.postedBy|isCurrentUser}}]">
<div class="message-detail">
<span class="bold">{{message.postedBy.name}}</span>
</div>
<div class="message" ng-bind-html="message.message | nl2br" autolinker></div>
<img ng-src="{{message.imageUrl}}" ng-if="message.imageUrl"/>
<small am-time-ago="message.postDate">{{message.postDate|timeago}}</small>
</div>
<div class="cf"></div>
</div>
</ion-content>
<ion-footer-bar class="bar-light message-footer">
<button class="button button-icon icon icon-upload" flow-btn flow-file-added="imageUploaded($file)" flow-name="imageTemp.imageUrlTemp"></button>
<label class="item-input-wrapper" for="newmessage">
<textarea focus-me="input.focusInput" id="newmessage" ng-model="input.message" value="" required minlength="1" maxlength="1500" msd-elastic></textarea>
</label>
<button class="button button-clear" type="submit" ng-disabled="!input.message || input.message === ''" ng-click="sendMessage()" translate="send"></button>
</ion-footer-bar>
</ion-view>
{{'error_loading_messages'{124; translate}}
{{message.postedBy.name}
{{message.postDate | timeago}}
我尝试将键盘附加属性添加到ion页脚栏,但添加此属性后页脚只会变大。加上页脚已经停留在键盘的顶部,所以它看起来不需要了。我有下面的情况,当我输入一些东西时,视图似乎会上升一点
此时将显示键盘:
此时键盘处于隐藏状态:
你们中有人知道如何在键盘出现时将ion内容调整到正常高度吗?我尝试了一些方法,但问题似乎消失了,但我认为解决方案不正确,或者这是否就是解决问题的方法。因此,如果有人有更好的解决方案,请分享。我要做的第一件事是包括Ionic键盘插件,以获取基于键盘的事件 在CSS中,我添加了:
.message-footer { min-height: 44px; }
在我的控制器中,我添加了以下代码:
$scope.$on('taResize', function (e, ta) {
if(!ta || !footerBar) return;
var taHeight = ta[0].offsetHeight + 10;
var newHeight = (taHeight < 44) ? 44 : taHeight;
scroller.style.bottom = newHeight + 'px';
footerBar.style.height = newHeight + 'px';
});
$scope.$on('taResize',函数(e,ta){
如果(!ta | |!footerBar)返回;
var Tahheight=ta[0]。远视+10;
var newHeight=(塔赫特<44)?44:塔赫特;
scroller.style.bottom=newHeight+'px';
footerBar.style.height=newHeight+'px';
});
请参见此,谢谢,但这并不能解决我的问题。我在配置中添加了首选项,因为我已经安装了插件,但没有做任何更改。他和我的处境不同。在他的情况下,键盘落在完整视图(包括页脚)的顶部,而在我的情况下,视图向上移动,使页眉和一半内容落在屏幕上。爱你的独白:)@Sietse-我在ionic2聊天应用程序中也面临类似的问题。你找到解决办法了吗?@hardik.shah我找到了解决办法,但我认为这不是一个好办法。我会用我所做的事情写一个答案,因为在这个时候,我不知道到底是什么解决了这个问题。