离子滚动到特定列表项

Question

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

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

当我转到测试按钮时,我想滚动到带有文本"文本"的列表项.

<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文档以获取更多信息.

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

Answer 2

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

scrollTo(element:string) {

      document.getElementById(element).scrollIntoView();

  }