ionnic-scollDelegate (滚动到指定位置)

ionnic-scollDelegate (滚动到指定位置)

1、滚动到顶部；

2、滚动到底部；

3、可以通过获取当前页面的位置，从而实现滚动到页面指定位置，通过 true 实现动画滚动效果。

示例代码：

 

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 6     <link rel="stylesheet" href="css/ionic.css"/>
 7     <script src="js/ionic.bundle.js"></script>
 8     <title></title>
 9 </head>
10 <body ng-controller="myCtr">
11 <ion-header-bar>
12     <h1 class="title">Header</h1>
13 </ion-header-bar>
14 <ion-content ng-controller="myCtr">
15     <p>Hello</p>
16     <ul class="list list-inset">
17         <li class="item" ng-repeat="temp in list">
18             {{temp}}
19         </li>
20     </ul>
21 </ion-content>
22 <ion-footer-bar>
23     <h1 class="title">Footer</h1>
24     <button class="button button-calm" ng-click="toTop()">滚动到顶部</button>
25     <button class="button button-balanced" ng-click="get()">获得当前位置</button>
26     <button class="button button-royal" ng-click="scrollTo()">滚动到指定位置</button>
27     <button class="button button-assertive" ng-click="toBottom()">滚动到底部</button>
28 </ion-footer-bar>
29 <script>
30     var app = angular.module('myApp', ['ionic']);
31     app.controller('myCtr',['$scope','$ionicScrollDelegate',function($scope,$ionicScrollDelegate){
32         $scope.list = [];
33         for(var i=0;i<100;i++){
34             $scope.list.push(i);
35         }
36         $scope.toTop = function(){
37             $ionicScrollDelegate.scrollTop(true);
38         }
39         $scope.toBottom = function(){
40             $ionicScrollDelegate.scrollBottom(true);
41         }
42         //拿到当前滚动位置信息
43         $scope.get = function(){
44             var obj = $ionicScrollDelegate.getScrollPosition();
45             console.log(obj);
46             alert('left: '+obj.left+'  top: '+obj.top+'  zoom: '+obj.zoom)
47         }
48         //滚动到指定位置
49         $scope.scrollTo = function(){
50             $ionicScrollDelegate.scrollTo(0,2640,true);
51         }
52     }]);
53 </script>
54 </body>
55 </html>

 

 

 

posted @ 2017-01-09 18:51  时间脱臼  阅读(724)  评论(0)    收藏  举报