卡片加载更多

app.js

@@ -75,7 +75,7 @@ app.use(function(err, req, res, next) {
         error: {}
     });
 });
-api.checkSnapState();
+// api.checkSnapState();
 api.getSnapByTimer();
 
 module.exports = app;

public/scripts/controllers/bookmarks-controller.js

@@ -14,11 +14,14 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
     $scope.loadBusy = false;
     $scope.changeCurrentPage = function(currentPage) {
         currentPage = parseInt(currentPage) || 0;
-        console.log(currentPage);
+        console.log('currentPage = ', currentPage);
         if (currentPage <= $scope.totalPages && currentPage >= 1) {
+            $scope.loadBusy = true;
             $scope.currentPage = currentPage;
             $scope.inputPage = '';
             getBookmarks(params);
+        } else {
+            $scope.currentPage = $scope.totalPages
         }
     }
 
@@ -71,7 +74,6 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
         toastr.warning('功能暂未实现。。。', "警告");
     }
 
-
     $scope.jumpToTags = function(tagId) {
         $state.go('tags', {
             tagId: tagId,
@@ -95,9 +97,9 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
 
     $scope.loadCardData = function() {
         console.log('loadCardData.........')
-        $scope.currentPage += 1;
+        if (!$scope.loadBusy) {
-        $scope.changeCurrentPage($scope.currentPage);
+            $scope.changeCurrentPage($scope.currentPage += 1)
-        $scope.loadBusy = true;
+        }
     }
 
     pubSubService.subscribe('EditCtr.inserBookmarsSuccess', $scope, function(event, params) {
@@ -109,25 +111,26 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
     function getBookmarks(params) {
         if (params.showStyle != 'navigate') {
             params.currentPage = $scope.currentPage;
-            params.perPageItems = params.showStyle == 'table' ? perPageItems : perPageItems * 3;
+            params.perPageItems = perPageItems;
         }
         bookmarkService.getBookmarks(params)
             .then((data) => {
                 if (params.showStyle != 'navigate') {
-                    $scope.bookmarks = data.bookmarks;
                     $scope.totalPages = Math.ceil(data.totalItems / perPageItems);
                     if (data.totalItems == 0) {
                         toastr.info('您还没有书签，请点击菜单栏的添加按钮进行添加', "提示");
                     }
-                } else {
                     if (params.showStyle == 'card') {
-                        console.log('loadCardData end.........')
+                        data.bookmarks.forEach(bookmark => {
-                        $scope.bookmarks = $scope.bookmarks.concat(data);
+                            $scope.bookmarks.push(bookmark);
+                        })
                         $scope.loadBusy = false;
+                        console.log('loadCardData end.........', $scope.loadBusy);
                     } else {
-                        $scope.bookmarks = data;
+                        $scope.bookmarks = data.bookmarks;
                     }
-
+                } else {
+                    $scope.bookmarks = data;
                     if ($scope.bookmarks.length <= 2) {
                         $(".js-msg").removeClass("hidden");
                     }

public/views/bookmarks.html

@@ -19,15 +19,8 @@
                 </div>
                 <div class="fourteen wide column" ng-if="tag.bookmarks.length">
                     <div class="ui grid container">
-                        <div
+                        <div class="four wide column js-navigate-bookmark" ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmarkEditHover:bookmarkEditHover, bookmark:(!bookmarkNormalHover && !bookmarkEditHover)}" ng-mouseover="edit ? (bookmarkEditHover=true) : (bookmarkNormalHover=true)"
-                            class="four wide column js-navigate-bookmark"
+                            ng-mouseleave="edit ? (bookmarkEditHover=false) : (bookmarkNormalHover=false)" ng-repeat="bookmark in tag.bookmarks" ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{ bookmark.title }}" id="{{bookmark.id}}">
-                            ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmarkEditHover:bookmarkEditHover, bookmark:(!bookmarkNormalHover && !bookmarkEditHover)}"
-                            ng-mouseover="edit ? (bookmarkEditHover=true) : (bookmarkNormalHover=true)"
-                            ng-mouseleave="edit ? (bookmarkEditHover=false) : (bookmarkNormalHover=false)"
-                            ng-repeat="bookmark in tag.bookmarks"
-                            ng-click="jumpToUrl(bookmark.url, bookmark.id)"
-                            title="{{ bookmark.title }}"
-                            id="{{bookmark.id}}">
                             <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px" ng-src="./images/{{ bookmarkEditHover ? 'delete-hover' : 'delete'}}.png" ng-if="edit" ng-click="delBookmark(bookmark.id)">
                             <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px;float:right;" ng-src="./images/{{ bookmarkEditHover ? 'edit-bookmark-hover' : 'edit-bookmark'}}.png" ng-if="edit" ng-click="editBookmark(bookmark.id)">
                             <img class="ui ui middle aligned tiny image" ng-src=" http://favicon.byi.pw/?url={{bookmark.url}}" style="width:16px;height:16px" ng-if="!edit">
@@ -92,12 +85,13 @@
     </tfoot>
 </table>
 <div class="ui segment" ng-if="showStyle === 'card'">
-    <div class="ui five link stackable cards" infinite-scroll='loadCardData()' infinite-scroll-disabled='loadBusy' infinite-scroll-distance='1'>
+    <div class="ui large text loader" ng-class="{active:loadBusy, disabled:!loadBusy}"> 正在加载中...</div>
+    <div class="ui five link stackable cards" infinite-scroll='loadCardData()' infinite-scroll-immediate-check="false">
         <div class="card" ng-repeat="bookmark in bookmarks">
             <div class="image" href="{{ bookmark.url }}" ng-click="jumpToUrl(bookmark.url, bookmark.id)">
-                <img ng-src="./images/snap/{{bookmark.id}}.png" err-src="./images/snap/default.png"/>
+                <img ng-src="./images/snap/{{bookmark.id}}.png" err-src="./images/snap/default.png" />
             </div>
-            <div class="content" ng-click="jumpToTags(tag.id)">
+            <div class="content" ng-click="jumpToUrl(bookmark.url, bookmark.id)">
                 <div class="description bookmarkTitle">
                     {{bookmark.title}}
                 </div>