blog内容页底部优化问题

最新推荐文章于 2024-10-18 11:33:00 发布

浪去爪哇岛喝咖啡

最新推荐文章于 2024-10-18 11:33:00 发布

阅读量82

点赞数

分类专栏：学相伴飞哥文章标签： css html css3 vue js

本文链接：https://blog.csdn.net/qq_32695257/article/details/122572515

版权

学相伴飞哥专栏收录该内容

33 篇文章 0 订阅

订阅专栏

底部优化问题

在这里插入图片描述

index.html核心代码

//加一些居中布局的样式
 <style>
  .ksquare-loading{text-align: center;padding-bottom: 100px}
  .ksd-emtpy{padding:40px 0;text-align: center;font-size: 48px;}
  .ksd-square-loading{color:#fff;letter-spacing: 0.1em;}
  .ksd-square-loading .nbtn{padding:10px 0}
  .ksd-square-loading button{color:#fff;}
  .ksd-no-bottom{text-align: center;font-size: 16px;padding:40px 0;}
  .simple-title-small-active{color: green;font-weight: bold}
 </style>



<div v-if="total==0" class="ksd-empty">
 <div>数据还在造就中...</div>
</div>
<div class="ksquare-loading ksd-square-loading" v-if="total>0">
 <div>总共有：{{total}}条记录，总{{pages}}页,当前是：{{pageNo}}，每页显示：{{pageSize}}</div>
 <div class="nbtn" v-if="total>
                         "><button @click="loadMore"
                                              style="color: #fff;"
                            v-if="!markflag">点击加载更多</button></div>

 <div class="ksd-no-bottom" v-if="markflag">亲，我是有底线的哦~~~</div>
</div>

index.js核心代码

var vue=new Vue({
    el:"#app",
    data:{
    
        pageNo:1,
        pageSize:4,
        total:0,
        pages:0,
      
        // blogByYears:[]
    },
    methods:{
        loadMore:function(){
            if(this.pageNo == this.pages){
                alert("没有更多了...")
                this.markflag =true
                return;
            }
            this.markflag=(this.pageNo == this.pages-1)
            this.pageNo++;
            this.loadBlogContent()
        },
    }