Swiper中文论坛

标题: 分享在angularjs用swiper做的下拉加载 [打印本页]
作者: 小白    时间: 2015-8-11 14:33
标题: 分享在angularjs用swiper做的下拉加载
本帖最后由 小白 于 2015-8-11 14:37 编辑

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) {

  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];

  45.                         if (-snapheight - 40 > swiper.translate && !scope.isload) {
  46.                             scope.isload = true;
  47.                             element.find(".pullUpLabel").html("松手刷新");
  48.                         }
  49.                     },
  50.                     onSlideChangeEnd: function (swiper) {

  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.             }

  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>

  9.      <style>
  10.     .swiper-container {
  11.         position:absolute;
  12.         width:100%;
  13.     }
  14.     .swiper-slide {
  15.                 height:90px;
  16.     }  
  17.     </style>
复制代码


作者: Mr.Rain    时间: 2015-11-15 20:34
高大上，有点流弊啊
作者: remenbo@163.com    时间: 2015-11-27 01:29
有没有演示  看看是什么数据格式
作者: abcdefg    时间: 2015-12-21 15:18
好像很厉害的样子，顶一下



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2