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

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

本文给大家介绍的一款组件是：

前端vue分页组件简单好用列表分页组件， 分页器组件，用于展示页码、请求数据等，并包含翻页功能。

本文将介绍如何使用Vue和Uni-app快速实现一个简单的列表分页组件和分页器组件，用于展示页码、请求数据等，并包含翻页功能。我们将通过使用uni-app插件市场提供的组件来简化开发过程，

 效果图如下:

 

## 前置条件

在开始之前，请确保您已经安装了HbuilderX工具。此外，还需要创建一个Uni-app项目。

## HTML代码部分

首先，我们需要在HTML模板中引入组件并进行布局。在`<template>`标签中添加以下代码：

```html
<template>
 <view class="content">
  <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>
```

接下来，在页面的逻辑部分(如methods),可以定义点击事件的处理函数。例如：

```javascript
methods: {
 goProDetail() { // 点击产品详情的处理函数
  console.log('点击产品详情'); // 在控制台输出日志信息，可以根据实际需求进行修改
 },
 pageClick(e) { // 点击页码的处理函数
  console.log('点击页码', e); // 在控制台输出日志信息，可以根据实际需求进行修改
 }
}
```

然后，在CSS部分，可以对页面进行样式设置。在`<style>`标签中添加以下代码：

```css
<style>
.content {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}
.mui-content-padded {
 margin: 0px 14px; /* background-color: #ffffff; */
}
</style>
```页码的处理函数
  console.log('点击页码', e); // 在控制台输出日志信息，可以根据实际需求进行修改
 }
}
```

 

阅读全文下载完整代码请关注微信公众号： 前端组件开发