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)
添加手表:
$scope.$watch('messages', function(newValue, oldValue) {
$ionicScrollDelegate.scrollBottom(true);
}, true);
Run Code Online (Sandbox Code Playgroud)
您出现此行为的原因是 deviceReady 无法保证项目已呈现,这会导致您的列表根本无法滚动到任何地方。使用手表,当数组已加载且值已存在时,您将滚动。
| 归档时间: |
|
| 查看次数: |
842 次 |
| 最近记录: |