feat:首页文章更多加载

dyedd · Mar 29, 2022 · 65dfcc3 · 65dfcc3
1 parent 94d27dd
commit 65dfcc3
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 60 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -749,58 +749,40 @@ fix*/
 分页
  */
 .page-pagination {
-    margin-top: 10px;
-}
-
-.page-link {
-    border-radius: 50% !important;
-    margin: 5px;
-    height: 36px;
-    width: 36px;
     text-align: center;
-    padding: .5rem;
-    box-shadow: var(--box-shadow);
-    border: none;
-}
-
-.page-link:focus {
-    box-shadow: none;
-}
-
-.next.page-item > .page-link {
-    padding: 5px;
-}
-
-.prev.page-item > .page-link {
-    padding: 5px;
-}
-
-.theme-dark .page-item span {
-    color: rgba(255, 255, 255, 0.6);
-}
-
-.page-item span {
-    margin: 5px;
-    height: 50px;
-    width: 40px;
+    padding: 15px 0;
     display: flex;
     justify-content: center;
+    align-items: center;
+    position: relative;
+    z-index: 10;
 }
-
-.page-item {
+.page-pagination a {
+    position: relative;
+    display: inline-block;
+    width: 110px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 40px;
+    border-radius: 100px;
+    transition: 0.3s ease-in-out;
+    color: #f1f4f8;
+    background-color: var(--theme-color);
+    overflow: hidden;
+}
+.page-pagination {
     position: relative;
 }
-.page-item:not(.active):not(:last-child):not(:first-child) a::after {
+.page-pagination .loading::after {
     content: '';
     display: inline-block;
     background-image: url(../img/ico-xiaoji.png);
     width: 13px;
     height: 13px;
-    position: relative;
-    top: -36px;
-    left: 15px;
-    transform: rotate(24deg);
+    position: absolute;
+    top: 4px;
 }
+
 /**
 滚动条
  */
@@ -945,4 +927,7 @@ fix*/
     align-items: center;
     color: var(--dark-routine);
     font-size: .6rem;
+}
+.theme-dark .page-pagination a {
+    background-color: var(--dark-content);
 }
diff --git a/assets/js/lanstarApp.js b/assets/js/lanstarApp.js
@@ -30,6 +30,7 @@ let lanstar = {
         this.addInitTabs();
         this.addInitCollapse();
         this.addCarouselEnter();
+        this.addMorePages();
     },
     addFunc: () => {
         let getCookie = function (cookieName)
@@ -540,7 +541,33 @@ let lanstar = {
            $(this).children('a').css({'display':'flex'})
         })
         $('#carouselCaptions').on('mouseleave',function (){
-            $(this).children('a').hide(1000)
+            $(this).children('a').hide()
         })
+    },
+    addMorePages(){
+        $('.next').click(function() {
+            $this = $(this);
+            $(this).addClass('loading').text('正在努力加载');
+            let href =$(this).attr('href');
+            if (href != undefined) {
+                $.ajax({
+                    url: href,
+                    type: 'get',
+                    success: function(data) { //请求成功
+                        console.log(data)
+                        $this.removeClass('loading').text('查看更多');
+                        var $res = $(data).find('.article-list');
+                        $('.artices').append($res.fadeIn(500));
+                        let newhref = $(data).find('.next').attr('href');
+                        if (newhref != undefined) {
+                            $('.next').attr('href', newhref);
+                        } else {
+                            $('.next').remove(); //如果没有下一页了，隐藏
+                        }
+                    }
+                });
+            }
+            return false;
+        });
     }
 }
diff --git a/functions.php b/functions.php
@@ -196,4 +196,4 @@ function thePrev($widget)
 function themeVersion() {
     $info = Typecho_Plugin::parseInfo(__DIR__ . '/index.php');
     return $info['version'];
-}
+}
diff --git a/index.php b/index.php
@@ -17,25 +17,11 @@
         <div class="col-xl-6 col-md-6 col-12" id="pjax-container">
             <?php $this->need('layout/head.php'); ?>
             <?php $this->need('component/index.banner.php') ?>
-            <?php $this->need('component/index.article.php'); ?>
+            <div class="artices">
+                <?php $this->need('component/index.article.php'); ?>
+            </div>
             <div class="page-pagination">
-                <?php
-                $this->pageNav(
-                    '<svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-zuo"></use>
-                    </svg>',
-                    '<svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-you"></use>
-                    </svg>',
-                    3, '...', array(
-                    'wrapTag' => 'ul',
-                    'wrapClass' => 'pagination justify-content-center',
-                    'itemTag' => 'li',
-                    'itemClass' => 'page-item',
-                    'linkClass' => 'page-link',
-                    'currentClass' => 'active'
-                ));
-                ?>
+                <?php $this->pageLink('加载更多','next'); ?>
             </div>
         </div>
         <?php $this->need('layout/right.php'); ?>