如何在添加数据时向下滚动到页面底部？

Question

我在我的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 = []; 

Answer 1

您可以检查$ionicScrollDelegate服务在这里：http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate/

使用方法

$ionicScrollDelegate.scrollBottom([shouldAnimate]) 

shouldAnimate是一个布尔类型，用于指定是否需要动画scrool。