uni-app之实现分页

一、下载库

官方文档地址为:
https://ext.dcloud.net.cn/plugin?id=32

点击下载zip压缩包即可,下载完毕后解压到放置前端相关组件目录,即components目录。

二、使用

1.引入

1
import uniPagination from '../../components/uni-pagination/uni-pagination/uni-pagination.vue'

2.模板区域使用(在里)

1
<uni-pagination @change="handlePage" show-icon="true" :total="postCount" :current="pageNum" :pageSize="pageSize"></uni-pagination>

3.编写handlePage函数

1
2
3
4
5
6
7
handlePage(params){
var pageIndex = params.current;

console.log("this.pageNum:"+pageIndex);

this.getPostListInfo(pageIndex)
}

4.我的完整代码如下

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<template>
<view class="content">
<!-- <image class="logo" src="/static/logo.png"></image> -->
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
<view class="uni-list">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in list" :key="index">
<!-- <view class="uni-list-cell-navigate uni-navigate-right">{{ item.Title }}</view> -->

<button type="default" @click="getDetail(item.Title, item.Id, item.Url)">{{ item.Title }}</button>
</view>
<uni-pagination @change="handlePage" show-icon="true" :total="postCount" :current="pageNum" :pageSize="pageSize"></uni-pagination>
</view>
</view>
</template>

<script>
import common from '../../common/common.js';
import uniPagination from '../../components/uni-pagination/uni-pagination/uni-pagination.vue';
export default {
components: { uniPagination },
data() {
return {
title: '文章列表',
postCount: 0,
pageSize: 10,
pageNum: 1,
list: []
};
},

onLoad() {
this.getPostListInfo(this.pageNum);

this.getPersonalBlogInfo();
},
methods: {
getPostListInfo(pageIndex) {
console.log('pageIndex:' + pageIndex);
uni.request({
url: common.website_url + '/cnblogs/getPersonalBlogPostList/' + pageIndex,
method: 'POST',
success: res => {
console.log('isSuccess');
console.log('getPostListInfo:' + JSON.stringify(res.data));
this.list = res.data;
},
fail: function(e) {
console.log('接口调用失败:' + JSON.stringify(e));
}
});
},

getPersonalBlogInfo() {
uni.request({
url: common.website_url + '/cnblogs/getPersonalBlogInfo',
method: 'POST',
success: res => {
//console.log('getPersonalBlogInfo:' + JSON.stringify(res.data));
this.postCount = res.data.postCount;
this.pageSize = res.data.pageSize;
},
fail: function(e) {
console.log('接口调用失败:' + JSON.stringify(e));
}
});
},
getDetail(Title, Id, Url) {
console.log('Title:' + Title + ' Id:' + Id);

uni.navigateTo({
url: '../post/post/post?Title=' + Title + '&Id=' + Id
});
},
handlePage(params) {
var pageIndex = params.current;

console.log('this.pageNum:' + pageIndex);

this.getPostListInfo(pageIndex);
}
}
};
</script>

<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}

.text-area {
display: flex;
justify-content: center;
}

.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>

5.效果图

界面虽然不好看,但功能是Ok的。

当前页

图一

点击下一页

图二

文章目录
  1. 一、下载库
  2. 二、使用
    1. 1.引入
    2. 2.模板区域使用(在里)
    3. 3.编写handlePage函数
    4. 4.我的完整代码如下
    5. 5.效果图
      1. 当前页
      2. 点击下一页