Tìm kiếm trang web

javascript - Ionic Cuộn đến Mục Danh Sách Cụ Thể


Có cách nào để cuộn đến một mục cụ thể trong ion-list không?

Ví dụ trong codepen này: https://codepen.io/anon/pen/grEBQJ

Khi tôi đi đến nút kiểm tra, tôi muốn cuộn đến mục danh sách có văn bản "Text".

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

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

Tôi không tìm thấy bất kỳ ví dụ nào nên goTo chỉ để trống:

$scope.goTo = function(){

}

Câu trả lời #1

Bạn phải đặt một id cho phần tử danh sách như sau :

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

Và sau đó, phương thức $scope.goTo() phải chỉnh sửa hash vị trí và gọi phương thức anchorScroll() từ dịch vụ $ionicScrollDelegate:

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

Kiểm tra tài liệu $ionicScrollDelegate để biết thêm thông tin.

Cập nhật với codepen của bạn: https://codepen.io/anon/pen/RadXqL

Câu trả lời #2

Tôi đã triển khai chức năng này bằng JavaScript. Sau khi lồng mỗi ion-item trong một phần tử div, tôi đã truyền id của phần tử div vào hàm JS dưới đây.

scrollTo(element:string) {

      document.getElementById(element).scrollIntoView();

  }