Question

我使用离子进行聊天应用。离子内容是可滚动的。我已经制定了一个指令“专注于键盘打开”，其中当用户点击键盘时，移动键盘打开，滚动在离子内容中下降。当用户在键盘外单击时，键盘会向下并再次向下滚动。问题是，当我关闭键盘时，滚动变为禁用离子内容，我必须刷新视图以使离子内容再次滚动。这是HTML代码

<ion-content id="{{conversationId}}" on-scroll="onChatScroll(10)" delegate-handle="chat-convo-handle" class="has-header main-bg lg-chat-bg" ng-click="keyboardhide()">
    ....
    </ion-content>
    <ion-footer-bar class="custom-lg-bar lg-br-top sb-bg" keyboard-attach>
    <textarea id="txtbox1" ng-keyup="keyup()" ng-keydown="keydown()" ng-blur="blur()" ng-change="change()" class="lg-text-area sb-bg" rows="1" msd-elastic ng-model="$root.chatFactory.msg_txt" placeholder="Type your message..." data-emojiable="true" focus-on-keyboard-open hidekeyboard="hidekeyboard"></textarea>
    </ion-footer-bar>

该指令用于文本区域。这是我的指令代码。

.directive('focusOnKeyboardOpen', function($window, $ionicScrollDelegate, $timeout) {
    'use strict';
    return {
        restrict: 'A',
        scope: {
            hidekeyboard: '=hidekeyboard'
        },
        link: function(scope, element, attrs) {
            var keyboardOpen = false;
            // require cordova plugin https://github.com/driftyco/ionic-plugins-keyboard
            $window.addEventListener('native.keyboardshow', function(e) {
                keyboardOpen = true;
                element[0].focus();
                $timeout(function() {
                    $ionicScrollDelegate.$getByHandle('chat-convo-handle').scrollBottom(true);
                    $ionicScrollDelegate.$getByHandle('comment-handle').scrollBottom(true);
                    $ionicScrollDelegate.$getByHandle('post-comment-handle').scrollBottom(true);
                }, 0);

            });
            $window.addEventListener('native.keyboardhide', function(e) {
                keyboardOpen = false;
                // if (scope.hidekeyboard) {
                element[0].blur();
                // }

            });



            element[0].addEventListener('blur', function(e) {
                if (scope.hidekeyboard) {
                    keyboardOpen = false;
                    scope.hidekeyboard = false;
                } else {
                    if (keyboardOpen) {
                        element[0].focus();
                    }
                }


            }, true);
        }
    };
})

我无法理解为什么滚动在离子内容中被禁用。帮助任何人。也可以在我的控制器中使用关闭键盘的离子内容点击事件，

$scope.hidekeyboard = false;
$scope.keyboardhide = function() {
    $ionicScrollDelegate.$getByHandle('chat-convo-handle').resize();
    $ionicScrollDelegate.$getByHandle('chat-convo-handle').scrollBottom(true);
    $scope.hidekeyboard = true;
    cordova.plugins.Keyboard.close();
}

这是我的离子内容聊天应用程序的屏幕截图

Answer 1

尝试将冻结设置为false。

$ionicScrollDelegate.$getByHandle('your-handle').freezeScroll(false);

看看是否有效

离子内容滚动被禁用

1 个答案: