首页 › 使用心得 › 分享在angularjs用swiper做的下拉加载

小白 发表于 2015-8-11 14:33:26

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

本帖最后由 小白 于 2015-8-11 14:37 编辑

angularjs指令,js写也差不多define(['demo'], function (demo) {
    app.directive("swiperinfinitelist", ["$rootScope", "$parse", function ($rootScope, $parse) {
      return {
            restrict: "ACE",
            scope: {
                top: '=',
                bottom: '=',
callback: '&'
            },
            controller: function ($scope) {
                this.ready = function () {
                  if ($scope.mySwiper != null && $scope.mySwiper != undefined && $scope.mySwiper.updateSlidesSize != undefined) {
                        $scope.mySwiper.updateSlidesSize();
                  }
                }
                this.LoadData = function (callback) {
                  var fn = $parse($scope.callback);
                  fn({
                        callback: callback
                  });
                }
            }, link: function (scope, element, attrs, ctrl) {
                element.css("top", scope.top);
                element.css("bottom", scope.bottom);
                scope.isload = false;
                element.css("height", window.innerHeight - scope.bottom - scope.top);
                scope.mySwiper = new Swiper(element.get(0), {
                  direction: 'vertical',
                  slidesPerView: 'auto',
                  freeModeMomentumRatio: 20,
                  freeMode: true,
                  onInit: function (swiper) {

                  },
                  onTouchEnd: function (swiper) {
                        if (scope.isload) {
                            ctrl.LoadData(function () { scope.isload = false; });
                            element.find(".pullUpLabel").html("上拉加载数据");
                        }
                  },
                  onTouchMove: function (swiper) {
                        var count = swiper.snapGrid.length;
                        var snapheight = swiper.snapGrid;

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

                  }
                });
         
                // 离开时销毁
                scope.$on("$destroy", function (event) {
                  if (scope.mySwiper != null && scope.mySwiper != undefined && typeof (scope.mySwiper.destroy) == "function") {
                        scope.mySwiper.destroy(false, true);
                  }
                });
            }
      };
    }
      ]);
    app.directive("swiperinfiniteitem", [function () {
      return {
            restrict: "AE",
            require: '^?swiperinfinitelist',
            link: function (scope, element, attrs, ctrl) {
                if (scope.$last) {
                  ctrl.ready();
                }
            }

      };
    }
      ]);
});页面
<div swiperinfinitelist class="swiper-container"callback="oncallback(callback)" top="10"
    bottom="10">
      <ul class="swiper-wrapper" >
      <li bindonce ng-repeat="item in data" class="list-item swiper-slide" swiperinfiniteitem bo-bind="item"></li>
      <div class="pullUp" > <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载数据</span> </div>
    </ul>
</div>

   <style>
    .swiper-container {
      position:absolute;
      width:100%;
    }
    .swiper-slide {
                height:90px;
    }
    </style>

Mr.Rain 发表于 2015-11-15 20:34:55

高大上，有点流弊啊

remenbo@163.com 发表于 2015-11-27 01:29:08

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

abcdefg 发表于 2015-12-21 15:18:21

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

查看完整版本: 分享在angularjs用swiper做的下拉加载