|
本帖最后由 小白 于 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[count - 1];
- 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>
复制代码
|
|