专栏首页cwl_Java商城项目-页面分页效果

商城项目-页面分页效果

3.页面分页效果

刚才的查询中,我们默认了查询的页码和每页大小,因此所有的分页功能都无法使用,接下来我们一起看看分页功能条该如何制作。

这里要分两步,

  • 第一步:如何生成分页条
  • 第二步:点击分页按钮,我们做什么

3.1.如何生成分页条

先看下页面关于分页部分的代码:

可以看到所有的分页栏内容都是写死的。

3.1.1.需要的数据

分页数据应该是根据总页数当前页总条数等信息来计算得出。

  • 当前页:肯定是由页面来决定的,点击按钮会切换到对应的页
  • 总页数:需要后台传递给我们
  • 总条数:需要后台传递给我们

我们首先在data中记录下这几个值:page-当前页,total-总条数,totalPage-总页数

data: {
    ly,
    search:{
        key: "",
        page: 1
    },
    goodsList:[], // 接收搜索得到的结果
    total: 0, // 总条数
    totalPage: 0 // 总页数
}

因为page是搜索条件之一,所以记录在search对象中。

要注意:我们在created钩子函数中,会读取url路径的参数,然后赋值给search。如果是第一次请求页面,page是不存在的。因此为了避免page被覆盖,我们应该这么做:

不过,这个时候我们自己的search对象中的值就可有可无了

3.1.2.后台提供数据

后台返回的结果中,要包含total和totalPage,我们改造下刚才的接口:

在我们返回的PageResult对象中,其实是有totalPage字段的:

我们在返回时,把这个值填上:

页面测试一下:

OK

3.1.3.页面计算分页条

首先,把后台提供的数据保存在data中:

然后看下我们要实现的效果:

这里最复杂的是中间的1~5的分页按钮,它需要动态变化。

思路分析:

  • 最多有5个按钮,因此我们可以用v-for循环从1到5即可
  • 但是分页条不一定是从1开始:
    • 如果当前页值小于等于3的时候,分页条位置从1开始到5结束
    • 如果总页数小于等于5的时候,分页条位置从1开始到5结束
    • 如果当前页码大于3,应该从page-3开始
    • 但是如果当前页码大于totalPage-3,应该从totalPage-5开始

所以,我们的页面这样来做:

a标签中的分页数字通过index函数来计算,需要把i传递过去:

index(i){
    if(this.search.page <= 3 || this.totalPage <= 5){
        // 如果当前页小于等于3或者总页数小于等于5
        return i;
    } else if(this.search.page > 3) {
        // 如果当前页大于3
        return this.search.page - 3 + i;
    } else {
        return this.totalPage - 5 + i;
    }
}

需要注意的是,如果总页数不足5页,我们就不应该遍历15,而是1总页数,稍作改进:

分页条的其它部分就比较简单了:

<div class="sui-pagination pagination-large">
    <ul style="width: 550px">
        <li :class="{prev:true,disabled:search.page === 1}">
            <a href="#">«上一页</a>
        </li>
        <li :class="{active: index(i) === search.page}" v-for="i in Math.min(5,totalPage)" :key="i">
            <a href="#">{{index(i)}}</a>
        </li>
        <li class="dotted" v-show="totalPage > 5"><span>...</span></li>
        <li :class="{next:true,disabled:search.page === totalPage}">
            <a href="#">下一页»</a>
        </li>
    </ul>
    <div>
        <span>共{{totalPage}}页&nbsp;</span>
        <span>
            到第
            <input type="text" class="page-num" :value="search.page">
            页 <button class="page-confirm" οnclick="alert(1)">确定</button>
        </span>
    </div>
</div>

3.2.点击分页做什么

点击分页按钮后,自然是要修改page的值

所以,我们在上一页下一页按钮添加点击事件,对page进行修改,在数字按钮上绑定点击事件,点击直接修改page:

    prevPage(){
        if(this.search.page > 1){
            this.search.page--
        }
    },
    nextPage(){
        if(this.search.page < this.totalPage){
            this.search.page++
        }
    }

page发生变化,我们应该去后台重新查询数据。

不过,如果我们直接发起ajax请求,那么浏览器的地址栏中是不会有变化的,没有记录下分页信息。如果用户刷新页面,那么就会回到第一页。

这样不太友好,我们应该把搜索条件记录在地址栏的查询参数中

因此,我们监听search的变化,然后把search的过滤字段拼接在url路径后:

watch:{
    search:{
        deep:true,
            handler(val){
            // 把search对象变成请求参数,拼接在url路径
            window.location.href = "http://www.leyou.com/search.html?" + ly.stringify(val);
        }
    }
},

刷新页面测试,然后就出现重大bug:页面无限刷新!为什么?

因为Vue实例初始化的钩子函数中,我们读取请求参数,赋值给search的时候,也触发了watch监视!也就是说,每次页面创建完成,都会触发watch,然后就会去修改window.location路径,然后页面被刷新,再次触发created钩子,又触发watch,周而复始,无限循环。

所以,我们需要在watch中进行监控,如果发现是第一次初始化,则不继续向下执行。

那么问题是,如何判断是不是第一次?

第一次初始化时,search中的key值肯定是空的,所以,我们这么做:

watch:{
    search:{
        deep:true,
            handler(val,old){
            if(!old || !old.key){
                // 如果旧的search值为空,或者search中的key为空,证明是第一次
                return;
            }
            // 把search对象变成请求参数,拼接在url路径
            window.location.href = "http://www.leyou.com/search.html?" + ly.stringify(val);
        }
    }
}

再次刷新,OK了!

3.3.页面顶部分页条

在页面商品列表的顶部,也有一个分页条:

我们把这一部分,也加上点击事件:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 商城项目-实现基本搜索

    这个Vue实例中,通过import导入的方式,加载了另外一个js:top.js并作为一个局部组件。top其实是页面顶部导航组件,我们暂时不管

    cwl_java
  • 快速学习-JdbcTemplate

    为了使JDBC更加易于使用,Spring在JDBC API上定义了一个抽象层,以此建立一个JDBC存取框架。 作为Spring JDBC框架的核心,JDBC模...

    cwl_java
  • 快速学习Git-Tortoise Git实现分支管理

    在我们每次的提交,Git都把它们串成一条时间线,这条时间线就是一个分支。截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支。HEAD指...

    cwl_java
  • Java中的clone

    可以看出,打印的地址值是相同的,既然地址都是相同的,那么肯定是同一个对象。p和p1只是引用而已,他们都指向了一个相同的对象Person(23, "张三") 。 ...

    一觉睡到小时候
  • Django-pure-pagination的使用

    Django自带有分页的两个类,但是用起来没有第三方这个分页模块方便,下面介绍一下django-pure-pagination使用方法。该库基于django.c...

    菲宇
  • vae 相关论文 表示学习 2

    https://arxiv.org/pdf/1804.02086.pdf Structured Disentangled Representations

    用户1908973
  • 3,最简单的树(不显示图标)

    py3study
  • javascript如何监听页面刷新和页面关闭事件

    在我们的日常生活中,时常遇到这么一种情况,当我们在点击一个链接、关闭页面、表单提交时等情况,会提示我们是否确认该操作等信息。

    卡二条的技术圈子
  • OL4中styleFunction的妙用

    越用越觉得styleFunction是一个好东西,爱不释手啊,今天分享一个简单的memo。

    lzugis
  • 监控数据的采集

    监控数据有多种形式--有些系统会持续地输出数据,而其他系统只会在发生罕见事件时生成数据。有些数据能够直接定位问题,有些数据能帮助调查问题。更宽泛的说,拥有监控数...

    大蟒传奇

扫码关注云+社区

领取腾讯云代金券