离子滚动到特定列表项 [英] Ionic Scroll To Specific List Item

问题描述

是否可以滚动到离子列表中的特定项目?

Is there a way to scroll to a specific item in a ion-list?

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

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

When I Go to test button, I want to scroll to the list item with the text "Text".

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

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

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

I didn't find any examples so goTo is just blank:

$scope.goTo = function(){

}

推荐答案

您必须为列表元素设置一个ID，例如:

You have to set an id to list element like :

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

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

And then, $scope.goTo() method must modify location hash and call anchorScroll() method from $ionicScrollDelegate service :

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

有关详细信息，请查看 $ ionicScrollDelegate文档.

Check $ionicScrollDelegate documentation for more information.

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

Update with your codepen : https://codepen.io/anon/pen/RadXqL

这篇关于离子滚动到特定列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！