如何从底部开始滚动列表?

use*_*574 10 listview scroll angularjs ionic-framework

我正在研究chatapp,就像大多数chatapps一样,我的应用程序显示了一个消息列表.

  • 该列表是使用生成的ng-repeat.
  • 我已经颠倒了消息,以便最新的位于底部,最旧的位于顶部.

目前,当我的应用加载时,列表向下滚动

$ ionicScrollDelegate

我不喜欢这样做.这不是正确的方法,有时这会在打开我的应用程序时给我一些性能和加载问题.

我想知道是否有另一种强制方式,从底部到顶部开始/渲染列表,而不需要像现在一样将其滚动到底部.

这是我目前使用的代码:
在我的HTML中:

<script type="text/ng-template" id="home.html">
    <ion-view ng-controller="HomeController" title="Home">
        <ion-content>
            <ion-list>
                <ion-item ng-repeat="message in messages track by $index">
                    {{message}}
                </ion-item>
            </ion-list>
        </ion-content>    
    </ion-view>
</script>
Run Code Online (Sandbox Code Playgroud)

在我的app.js:

app.run(function($ionicPlatform, $state, $timeout, $localStorage, $location, $rootScope, $ionicScrollDelegate) {
    document.addEventListener('deviceReady', function() {
        setTimeout(function() {
                $ionicScrollDelegate.scrollBottom(true);
        }, 500);
    });
})
Run Code Online (Sandbox Code Playgroud)

sim*_*mme 1

添加手表:

 $scope.$watch('messages', function(newValue, oldValue) {
   $ionicScrollDelegate.scrollBottom(true);
 }, true);
Run Code Online (Sandbox Code Playgroud)

您出现此行为的原因是 deviceReady 无法保证项目已呈现,这会导致您的列表根本无法滚动到任何地方。使用手表,当数组已加载且值已存在时,您将滚动。