0
我在我的Ionic應用程序中進行了聊天,但是當用戶正在接收新消息並處於聊天狀態時,視圖不會向下滾動以顯示消息,用戶必須手動向下滾動才能看到它。如何在添加數據時向下滾動到頁面底部?
如何在出現新消息時自動滾動到頁面底部?
這裏是我的代碼的HTML:
<ion-view view-title="Chat Detail">
<ion-content class="padding" start-y="430">
<!-- *messages/content messages -->
<ol class="messages">
<!-- *self/container self messages -->
<li ng-repeat="message in messages" ng-class="{self: message.userId === myId, other: message.userId !== myId}">
<!-- *avatar/avatar image -->
<div class="avatar">
<img ng-src="{{ message.profilePic }}">
</div>
<!-- *msg/messages -->
<div id="data" class="msg">
<p>{{ message.text }}</p>
<time>
<i class="icon ion-ios-clock-outline"></i>
{{message.time}}
</time>
</div>
</li>
</ol>
</ion-content>
<!-- *bar-detail/color bar and input -->
<ion-footer-bar keyboard-attach class="item-input-inset bar-detail">
<label class="item-input-wrapper">
<input onblur="this.focus()" autofocus type="text" placeholder="Type your message" on-return="sendMessage(); closeKeyboard()" ng-model="data.message" on-focus="inputUp()" on-blur="inputDown()" />
</label>
<a class="button button-icon icon ion-arrow-return-left" ng-click="sendMessage()" ></a>
</ion-footer-bar>
</ion-view>
編輯:控制器補充說:
//Recieve messages
$timeout(function(){
var ref = firebase.database().ref('/messages/' + $scope.currentDiscussion);
ref.orderByChild("timestamp").on("value", function(snapshot1) {
$timeout(function(){
$scope.messages = snapshot1.val();
})
})
})
window.scrollTo(0,document.body.scrollHeight);
$scope.sendMessage = function() {
if ($scope.blocked === 1){
// An alert dialog
var alertPopup = $ionicPopup.alert({
title: 'BLOCKED',
template: 'This discussion is blocked.'
});
alertPopup.then(function(res) {
});
} else {
var d = new Date();
var g = new Date();
d = d.toLocaleTimeString().replace(/:\d+ /, ' ');
g = g.toLocaleTimeString().replace(/:\d+ /, ' ') + new Date();
$scope.sendMessages = firebase.database().ref('/messages/' + $scope.currentDiscussion).push({
userId: myId,
text: $scope.data.message,
time: d,
timestamp: g,
profilePic: $scope.displayProfilePic,
});
firebase.database().ref('/accounts/' + myId + "/discussions/" + $scope.currentDiscussion).update({
lastMessage: $scope.data.message,
time: d,
blocked: 0,
blockedOther: 0,
});
if ($scope.newMessages === ""){
firebase.database().ref('/accounts/' + $scope.savedUid + "/discussions/" + $scope.currentDiscussion).update({
lastMessage: $scope.data.message,
name: $scope.displayName,
profilePic: $scope.displayProfilePic,
time: d,
discussionId: $scope.currentDiscussion,
blocked: 0,
newMessages: 1,
userId: myId,
});
} else {
firebase.database().ref('/accounts/' + $scope.savedUid + "/discussions/" + $scope.currentDiscussion).update({
lastMessage: $scope.data.message,
name: $scope.displayName,
profilePic: $scope.displayProfilePic,
time: d,
discussionId: $scope.currentDiscussion,
blocked: 0,
newMessages: $scope.newMessages + 1,
userId: myId,
});
}
firebase.database().ref('/accounts/' + $scope.savedUid).update({
messagesTotal: $scope.messagesTotal + 1,
});
delete $scope.data.message;
$ionicScrollDelegate.scrollBottom(true);
}
};
$scope.inputUp = function() {
if (isIOS) $scope.data.keyboardHeight = 216;
$timeout(function() {
$ionicScrollDelegate.scrollBottom(true);
}, 300);
};
$scope.inputDown = function() {
if (isIOS) $scope.data.keyboardHeight = 0;
$ionicScrollDelegate.resize();
};
$scope.closeKeyboard = function() {
// cordova.plugins.Keyboard.close();
};
})
$scope.leaveChat = function() {
var userId = firebase.auth().currentUser.uid;
firebase.database().ref('accounts/' + userId).update({
currentDiscussion: "",
})
};
$scope.data = {};
$scope.myId = myId;
$scope.messages = [];
你好,是的,當我發送消息時,它會自動向下滾動,但是當我收到一條消息時,這不起作用,我不明白如何以這種方式進行集成。我添加了我的控制器的代碼讓你看看你是否有想法?預先感謝您 – FrenchyNYC
您可以使用角度'$ watch'服務爲'$ scope.messages'對象創建一個偵聽器。通過一個監聽器,每次'$ scope.messages'改變它的值,你都會調用'$ ionicScrollDelegate.scrollBottom(])'。 – mQuixaba
您是否介意更新我的初始代碼以將其集成到我的實際代碼中?嘗試這種解決方案時我非常頭疼(我對JavaScript仍然很陌生)。 – FrenchyNYC