分享在angularjs用swiper做的下拉加载

小白

angularjs指令,js写也差不多

1. define(['demo'], function (demo) {
   
2.     app.directive("swiperinfinitelist", ["$rootScope", "$parse", function ($rootScope, $parse) {
   
3.         return {
   
4.             restrict: "ACE",
   
5.             scope: {
   
6.                 top: '=',
   
7.                 bottom: '=',
   
8. callback: '&'
   
9.             },
   
10.             controller: function ($scope) {
    
11.                 this.ready = function () {
    
12.                     if ($scope.mySwiper != null && $scope.mySwiper != undefined && $scope.mySwiper.updateSlidesSize != undefined) {
    
13.                         $scope.mySwiper.updateSlidesSize();
    
14.                     }
    
15.                 }
    
16.                 this.LoadData = function (callback) {
    
17.                     var fn = $parse($scope.callback);
    
18.                     fn({
    
19.                         callback: callback
    
20.                     });
    
21.                 }
    
22.             }, link: function (scope, element, attrs, ctrl) {
    
23.                 element.css("top", scope.top);
    
24.                 element.css("bottom", scope.bottom);
    
25.                 scope.isload = false;
    
26.                 element.css("height", window.innerHeight - scope.bottom - scope.top);
    
27.                 scope.mySwiper = new Swiper(element.get(0), {
    
28.                     direction: 'vertical',
    
29.                     slidesPerView: 'auto',
    
30.                     freeModeMomentumRatio: 20,
    
31.                     freeMode: true,
    
32.                     onInit: function (swiper) {
    
33. 
    
34.                     },
    
35.                     onTouchEnd: function (swiper) {
    
36.                         if (scope.isload) {
    
37.                             ctrl.LoadData(function () { scope.isload = false; });
    
38.                             element.find(".pullUpLabel").html("上拉加载数据");
    
39.                         }
    
40.                     },
    
41.                     onTouchMove: function (swiper) {
    
42.                         var count = swiper.snapGrid.length;
    
43.                         var snapheight = swiper.snapGrid[count - 1];
    
44. 
    
45.                         if (-snapheight - 40 > swiper.translate && !scope.isload) {
    
46.                             scope.isload = true;
    
47.                             element.find(".pullUpLabel").html("松手刷新");
    
48.                         }
    
49.                     },
    
50.                     onSlideChangeEnd: function (swiper) {
    
51. 
    
52.                     }
    
53.                 });
    
54.            
    
55.                 // 离开时销毁
    
56.                 scope.$on("$destroy", function (event) {
    
57.                     if (scope.mySwiper != null && scope.mySwiper != undefined && typeof (scope.mySwiper.destroy) == "function") {
    
58.                         scope.mySwiper.destroy(false, true);
    
59.                     }
    
60.                 });
    
61.             }
    
62.         };
    
63.     }
    
64.         ]);
    
65.     app.directive("swiperinfiniteitem", [function () {
    
66.         return {
    
67.             restrict: "AE",
    
68.             require: '^?swiperinfinitelist',
    
69.             link: function (scope, element, attrs, ctrl) {
    
70.                 if (scope.$last) {
    
71.                     ctrl.ready();
    
72.                 }
    
73.             }
    
74. 
    
75.         };
    
76.     }
    
77.         ]);
    
78. });

复制代码

页面

1. <div swiperinfinitelist class="swiper-container"  callback="oncallback(callback)" top="10"
   
2.     bottom="10">  
   
3.         <ul class="swiper-wrapper" >
   
4.         <li bindonce ng-repeat="item in data" class="list-item swiper-slide" swiperinfiniteitem bo-bind="item"></li>
   
5.         <div class="pullUp" > <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载数据</span> </div>
   
6.     </ul>  
   
7. </div>
   
8. 
   
9.      <style>
   
10.     .swiper-container {
    
11.         position:absolute;
    
12.         width:100%;
    
13.     }
    
14.     .swiper-slide {
    
15.                 height:90px;
    
16.     }  
    
17.     </style>

复制代码

Mr.Rain

高大上，有点流弊啊

remenbo@163.com

有没有演示  看看是什么数据格式

abcdefg

好像很厉害的样子，顶一下