离子滚动到特定列表项

Question

有没有办法滚动到离子列表中的特定项？

例如，在此代码中：https://codepen.io/anon/pen/grEBQJ

当我转到测试按钮时，我想滚动到带有文本＆＃34; Text＆＃34;的列表项。

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

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

我没有找到任何例子，所以goTo只是空白：

$scope.goTo = function(){

}

Answer 1

你必须设置一个id列表元素，如：

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

然后，$scope.goTo()方法必须修改位置哈希并从anchorScroll()服务调用$ionicScrollDelegate方法：

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

查看$ionicScrollDelegate documentation了解详情。

使用您的codepen更新：https://codepen.io/anon/pen/RadXqL

Answer 2

我用JavaScript实现了这个功能。将每个ion-item嵌套在div元素中之后，将div元素id传递给下面的JS函数。

scrollTo(element:string) {

      document.getElementById(element).scrollIntoView();

  }