2015-05-30 17 views
9

Sto lavorando su un chatapp e come la maggior parte dei chatapps la mia app mostra un elenco di messaggi.Come avviare la lista di scorrimento dal basso?

  • L'elenco viene generato con ng-repeat.
  • Ho invertito i messaggi in modo che i più recenti siano nella parte inferiore e più vecchi in alto.

Attualmente, quando la mia app carica la lista viene fatta scorrere verso il basso con

$ ionicScrollDelegate

Non mi piace farlo in questo modo. Non è il modo corretto e a volte questo mi dà alcune prestazioni e problemi di caricamento quando si apre la mia app.

Mi chiedevo se c'è un altro, modo forzato, per avviare/visualizzare l'elenco dal basso verso l'alto senza la necessità di scorrere verso il basso come faccio ora.

Questo è il codice che attualmente uso:
Nel mio 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> 

Nel mio app.js:

app.run(function($ionicPlatform, $state, $timeout, $localStorage, $location, $rootScope, $ionicScrollDelegate) { 
    document.addEventListener('deviceReady', function() { 
     setTimeout(function() { 
       $ionicScrollDelegate.scrollBottom(true); 
     }, 500); 
    }); 
}) 
+1

Fare riferimento a questo, può aiutare ma non è sicuro: https://codepen.io/rossmartin/pen/XJmpQr –

risposta

1

Aggiungi un orologio invece:

$scope.$watch('messages', function(newValue, oldValue) { 
    $ionicScrollDelegate.scrollBottom(true); 
}, true); 

La ragione stai ottenendo questo comportamento è perché DeviceReady non garantisce th agli oggetti sono ancora resi, il che fa sì che la lista non scorra affatto. Con un orologio, scorrerai quando l'array è stato caricato e i valori sono già lì.

+0

OP chiesto di fare questo "senza la necessità di scorrere verso il basso" – lilbiscuit