[英]How to scroll down to bottom of page when data added?
I have made a chat in my Ionic app but when a user is receiving a new message and is on the chat, the view doesn't scroll down to let the message appear, the user has to manually scroll down to see it. 我已经在Ionic应用程序中进行了聊天,但是当用户正在接收新消息并且正在聊天时,视图不会向下滚动以使该消息出现,用户必须手动向下滚动才能查看该消息。
How could I auto scroll to the bottom of the page when a new message appears ? 出现新消息时,如何自动滚动到页面底部?
here is the HTML of my code : 这是我的代码的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>
EDIT : controller added : 编辑:控制器添加:
//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 = [];
You may check the $ionicScrollDelegate
service here: http://ionicframework.com/docs/api/service/ $ionicScrollDelegate/ 您可以在此处检查
$ionicScrollDelegate
服务: http ://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /
Use the method 使用方法
$ionicScrollDelegate.scrollBottom([shouldAnimate])
shouldAnimate is a boolean type to designate if you want a animated scrool or not. shouldAnimate是一个布尔类型,用于指定是否需要动画scrool。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.