我已经在我的 Ionic 应用程序中进行了聊天,但是当用户收到一条新消息并正在聊天时, View 不会向下滚动以使消息出现,用户必须手动向下滚动才能看到它.
如何在出现新消息时自动滚动到页面底部?
这是我的代码的 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>
编辑:添加 Controller :
//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 = [];
最佳答案
您可以在此处查看$ionicScrollDelegate
服务:http://ionicframework.com/docs/api/service/ $ionicScrollDelegate/
使用方法
$ionicScrollDelegate.scrollBottom([shouldAnimate])
shouldAnimate 是一个 bool 类型,用于指定您是否想要动画滚动。
关于javascript - 添加数据时如何向下滚动到页面底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42861275/