前端分页组件简单好用列表分页page组件

快速实现 简单好用列表分页组件, 分页器组件，用于展示页码、请求数据等 ，包含翻页。 详情请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=12576

效果图如下:

 

代码实现如下:

# 简单好用列表分页组件, 分页器组件，用于展示页码、请求数据等 ，包含翻页。

#### HTML代码部分

```html

<template>

<view class="content">

<!-- 1.推荐流贷产品”“推荐固贷产品”“推荐供应链产品”“推荐综合服务” -->

<div class="mui-content-padded">

<!-- 列表组件 -->

<CCBProjectList :productList="projectList" @click="goProDetail"></CCBProjectList>

</div>

<!--  totalNum: 条目总数量  pageCount:设置分页数量  curPageNum:设置当前页-->

<CCBPagingView :totalNum="totalNum" pageCount="10" :curPageNum="curPageNum" @pageClick="pageClick">

</CCBPagingView>

</view>

</template>

```

#### JS代码 （引入组件 填充数据）

```javascript

<script>

import CCBProjectList from '../../components/CCProjectList.vue';

import CCBPagingView from '../../components/CCPagingView.vue'

export default {

components: {

CCBProjectList,

CCBPagingView

},

data() {

return {

totalNum: 0,

curPageNum: 1,

// 列表数组

projectList: []

}

},

onLoad() {

this.requestData();

},

methods: {

// 列表条目点击事件

goProDetail(item) {

},

// 分页事件

pageClick(tag) {

if (tag === 0) {

// 上一页 (不等于第一页)

if (this.curPageNum > 1) {

this.curPageNum--;

this.requestData();

}

} else {

// 下一页 (不等于最后一页)

if (this.totalNum > (this.curPageNum * 10)) {

this.curPageNum++;

this.requestData();

}

}

},

requestData() {

// 模拟请求参数设置

let reqData = {

'area': '',

"pageSize": 10,

"pageNo": this.curPageNum

}

// 模拟请求接口

this.totalNum = 39;

this.projectList = [];

for (let i = 0; i < 10; i++) {

this.projectList.push({

'proName': '项目名称' + i,

'proUnit': '公司名称' + i,

'area': '广州',

'proType': '省级项目',

'stage': '已开工',

'id': i + ''

});

}

}

}

}

</script>

```

#### CSS

```CSS

<style>

page {

}

.content {

display: flex;

flex-direction: column;

}

.mui-content-padded {

margin: 0px 14px;

/* */

}

</style>

```