大腿的博客

vue + ts diy分页组件实现

vue typescript
字数统计: 927阅读时长: 4 min
2018/10/07 Share

学着用vue，自己写点东西，边学边做一个博客网站。之前遇见了前台的分页效果，想来自己还没有实现过就将就着用vue来实现一次…emmmmm 满满的坑…

思路

分页栏的每个显示都是一个小模块(比如页数，上一页，下一页什么的)，因为分页组件显示的字符比较固定，所以我将所有的显示都分了固定的数值，方便之后的填充分页栏数组。具体数值分配如下

1
2
3
4
5
6
-2 上一页
-1 下一页
0  表示显示页码以外还有很多页
n  第n页
ps：
首页和尾页用1和最大页数表示

定义好数值分配后，根据查询的分页数据来获得分页组件相关的数据，比如页码，页大小，总页数。
根据页码和总页数，来动态生成分页栏数组，举个栗子：
假如定义分页栏显示分页的栏目为7，页码为4，总页数为23，那么生成的数组就是[1,2,3,4,5,6,7,0,23,-1]
假如页码为10，那么生成数组为[-2,1,0,7,8,9,10,11,12,13,0,23,-1]
效果图


实现

vue ts 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
private homePageService = new HomePageService();
private PageSizes: number[] = [5, 7, 9]; // 页大小配置
private articlePageDate: any[] = []; // 页面分页的内容数据
private totalPages: number = 1; // 总页数
private pageNumber: number = 1; // 页码
private showPagesize: number = 7; // 分页栏显示页数
private showPageList: any[] = []; // 分页栏数组

// 加载页面请求分页数据，返回结果包含的页码和总页数，页数分页点击事件。
private queryForPage(pageNum: number) {
    // 根据定义的分页数值来判断上一页下一页
    if (pageNum === -2) {
        this.pageNumber = this.pageNumber - 1;
    } else if (pageNum === -1) {
        this.pageNumber = this.pageNumber + 1;
    } else {
        this.pageNumber = pageNum;
    }
    // 请求数据接口
    this.homePageService.queryForPage(this.pageNumber, this.PageSizes[2])
    .then((res) => {
        this.articlePageDate = res.date;
        // 获取返回的总页数
        this.totalPages = Number(res.totalPages);
        // 获取返回的页码
        this.pageNumber = Number(res.pageNumber);
        // 生成分页数组
        this.changePages();
    });
}

// 分页栏数组变化执行事件
@Watch('showPageList')
private watchShowPageList() {
    // $nextTick 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
    this.$nextTick(() => {
        this.pageItemActive();
    });
}

// 生成分页数组
private changePages() {
    // 重置数组
    this.showPageList = [];
    // 分页栏显示数除2，表示当前页码前后显示的多余页码。比如当前页码为10，显示7,8,9,10,11,12,13
    const x = Math.floor(this.showPagesize / 2);
    // 如果当前页-偏移量比1大，显示上一页（«），第一页和中间还有很多页（...）
    if (this.pageNumber - x > 1 ) {
        this.showPageList.push(-2);
        this.showPageList.push(1);
        this.showPageList.push(0);
    }
    // 循环页码
    for (let i = this.pageNumber - x; i <= this.pageNumber + x; i++) {
        if (i >= 1 && i <= this.totalPages) {
            this.showPageList.push(i);
        }
    }
    // 如果当前页-偏移量比最大页数小，显示下一页（»），最后一页和中间还有很多页（...）
    if (this.pageNumber + x < this.totalPages ) {
        this.showPageList.push(0);
        this.showPageList.push(this.totalPages);
        this.showPageList.push(-1);
    }
}

// 动态添加class
private pageItemActive() {
    const pageItems = document.getElementsByName('pageItems');
    for (const item of pageItems) {
        item.classList.remove('active');
    }
    for (const item of pageItems) {
        if (item.innerHTML.replace(/\s+/g, '') === this.pageNumber.toString()) {
            item.classList.add('active');
        }
    }
}

html 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div>
    <ul class="ul-page">
        <li v-for="n in showPageList">
            <a v-on:click="queryForPage(n)" name="pageItems" v-if="n === -2">
                «
            </a>
            <a v-on:click="queryForPage(n)" name="pageItems" v-else-if="n === -1">
                »
            </a>
            <a v-on:click="" name="pageItems" v-else-if="n === 0">
                    ...
            </a>
            <a v-on:click="queryForPage(n)" name="pageItems" v-else>
                {{ n }}
            </a>
        </li> 
    </ul>
</div>

原文作者：大腿君的大腿君

原文链接：https://shiyuquan.github.io/2018/10/07/vue-ts-diy分页组件实现/

发表日期：2018-10-07 15:14:11

更新日期：2018-10-07 20:01:49

版权声明：来自于大腿的许可

CATALOG
  1. 1. 思路
  2. 2. 实现
    1. 2.1. vue ts 代码
    2. 2.2. html 代码
Total : 27
2019
2018
java springboot mybatis markdown jvm hibernate redis 算法 vue typescript 代码检测 工具 posrtgresql 其他 杂谈 功能实现 面试 短信接口
其他