[英]Ionic Scroll To Specific List Item
Is there a way to scroll to a specific item in a ion-list? 有没有办法滚动到离子列表中的特定项目?
For example in this codepen: https://codepen.io/anon/pen/grEBQJ 例如,在此代码中: 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>
I didn't find any examples so goTo is just blank: 我没有找到任何例子,所以goTo只是空白:
$scope.goTo = function(){
}
You have to set an id to list element like : 你必须设置一个id列表元素,如:
<ion-item id="item{{item.id}}" ng-repeat="item in items">
Item {{ item.id }}
</ion-item>
And then, $scope.goTo()
method must modify location hash and call anchorScroll()
method from $ionicScrollDelegate
service : 然后,
$scope.goTo()
方法必须修改位置哈希并从$ionicScrollDelegate
服务调用anchorScroll()
方法:
$scope.goTo = function(id){
$location.hash('item'+id);
$ionicScrollDelegate.anchorScroll();
}
Check $ionicScrollDelegate documentation for more information. 查看$ ionicScrollDelegate文档以获取更多信息。
Update with your codepen : https://codepen.io/anon/pen/RadXqL 使用您的codepen更新: https ://codepen.io/anon/pen/RadXqL
I implemented this functionality with JavaScript. 我用JavaScript实现了这个功能。 After nesting each ion-item in a div element, passed the div element id to the JS function below.
将每个ion-item嵌套在div元素中之后,将div元素id传递给下面的JS函数。
scrollTo(element:string) {
document.getElementById(element).scrollIntoView();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.