Búsqueda de sitios web

javascript - Ionic Desplazarse a un elemento específico de la lista


¿Hay una forma de desplazarse a un elemento específico en un ion-list?

Por ejemplo, en este codepen: https://codepen.io/anon/pen/grEBQJ

Cuando voy al botón de prueba, quiero desplazame al elemento de la lista con el texto "Text".

<button ng-click="goTo()">Go to test</button>

<ion-list class="item">Test</ion-list>

No encontré ningún ejemplo, así que goTo está simplemente en blanco:

$scope.goTo = function(){

}

Respuesta #1

Tienes que asignar un id al elemento de la lista como:

<ion-item id="item{{item.id}}" ng-repeat="item in items">
      Item {{ item.id }}
</ion-item>

Y luego, el método $scope.goTo() debe modificar el hash de la ubicación y llamar al método anchorScroll() del servicio $ionicScrollDelegate :

$scope.goTo = function(id){
     $location.hash('item'+id);
     $ionicScrollDelegate.anchorScroll();
}

Consulta la documentación de $ionicScrollDelegate para más información.

Actualiza con tu codepen: https://codepen.io/anon/pen/RadXqL

Respuesta #2

Implementé esta funcionalidad con JavaScript. Después de anidar cada ion-item en un elemento div, pasé el id del elemento div a la función de JS a continuación.

scrollTo(element:string) {

      document.getElementById(element).scrollIntoView();

  }