查看: 4889|回复: 3
打印 上一主题 下一主题

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

[复制链接]

该用户从未签到

2

主题

3

帖子

65

积分

注册会员

Rank: 2

积分
65
跳转到指定楼层
楼主
发表于 2015-8-11 14:33:26 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 小白 于 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) {

  33.                     },
  34.                     onTouchEnd: function (swiper) {
  35.                         if (scope.isload) {
  36.                             ctrl.LoadData(function () { scope.isload = false; });
  37.                             element.find(".pullUpLabel").html("上拉加载数据");
  38.                         }
  39.                     },
  40.                     onTouchMove: function (swiper) {
  41.                         var count = swiper.snapGrid.length;
  42.                         var snapheight = swiper.snapGrid[count - 1];

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

  49.                     }
  50.                 });
  51.            
  52.                 // 离开时销毁
  53.                 scope.$on("$destroy", function (event) {
  54.                     if (scope.mySwiper != null && scope.mySwiper != undefined && typeof (scope.mySwiper.destroy) == "function") {
  55.                         scope.mySwiper.destroy(false, true);
  56.                     }
  57.                 });
  58.             }
  59.         };
  60.     }
  61.         ]);
  62.     app.directive("swiperinfiniteitem", [function () {
  63.         return {
  64.             restrict: "AE",
  65.             require: '^?swiperinfinitelist',
  66.             link: function (scope, element, attrs, ctrl) {
  67.                 if (scope.$last) {
  68.                     ctrl.ready();
  69.                 }
  70.             }

  71.         };
  72.     }
  73.         ]);
  74. });
复制代码
页面
  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.      <style>
  9.     .swiper-container {
  10.         position:absolute;
  11.         width:100%;
  12.     }
  13.     .swiper-slide {
  14.                 height:90px;
  15.     }  
  16.     </style>
复制代码


分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

该用户从未签到

0

主题

9

帖子

9

积分

新手上路

Rank: 1

积分
9
沙发
发表于 2015-11-15 20:34:55 | 只看该作者
高大上,有点流弊啊
回复 支持 反对

使用道具 举报

该用户从未签到

0

主题

10

帖子

40

积分

新手上路

Rank: 1

积分
40
板凳
发表于 2015-11-27 01:29:08 | 只看该作者
有没有演示  看看是什么数据格式
回复 支持 反对

使用道具 举报

该用户从未签到

0

主题

4

帖子

4

积分

新手上路

Rank: 1

积分
4
地板
发表于 2015-12-21 15:18:21 | 只看该作者
好像很厉害的样子,顶一下
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-11-1 09:30 , Processed in 0.062493 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表