随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。
组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。
本文给大家介绍的组件是：
前端vue上拉加载下拉刷新组件,支持列表分页 本地分页, 下载完整代码请访问uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?id=12942
更多前端组件信息请关注微信公众号： 前端组件开发
效果图如下:
#### 使用方法
```使用方法
<!-- pullDown:下拉刷新 back-top: 回到顶部 -->
<ccPullScroll class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
</ccPullScroll>
```
#### HTML代码部分
```html
<template>
<view class="content">
<!-- -->
<div class="mui-content-padded">
<!-- pullDown:下拉刷新 back-top: 回到顶部 -->
<ccPullScroll class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
<!-- 列表组件 -->
<CCBProjectList :productList="projectList" @click="goProDetail"></CCBProjectList>
</ccPullScroll>
</div>
</view>
</template>
```
#### JS代码 （引入组件 填充数据）
```javascript
<script>
import CCBProjectList from '../../components/ccPageView/CCProjectList.vue';
import ccPullScroll from '../../components/ccPullScroll/index.vue'
export default {
components: {
CCBProjectList,
ccPullScroll
},
data() {
return {
// 列表总数量
totalNum: 60,
// 页码 默认1开始
curPageNum: 1,
// 列表数组
projectList: []
}
},
mounted() {
// 页面刷新方法 会自动调用pulldown一次
this.pageRefresh();
},
methods: {
pageRefresh() {
let myThis = this;
this.$nextTick(() => {
myThis.$refs.pullScroll.refresh();
});
},
pullDown(pullScroll) {
console.log('下拉刷新');
this.projectList = [];
this.curPageNum = 1;
setTimeout(() => {
this.requestData(pullScroll);
}, 300);
},
// 上拉加载
onReachBottom() {
// 数据全部加载完
if (this.curPageNum * 10 >= this.totalNum) {
} else {
this.curPageNum++;
this.requestData();
}
},
// 列表条目点击事件
goProDetail(item) {
},
requestData() {
// 模拟请求参数设置
let reqData = {
'area': '',
"pageSize": 10,
"pageNo": this.curPageNum
}
let myThis = this;
setTimeout(function() {
// 模拟请求接口
for (let i = 0; i < 10; i++) {
myThis.projectList.push({
'proName': '产品名称' + i,
'proUnit': '公司名称' + i,
'area': '广东省',
'proType': '省级项目',
'stage': '已开工',
'id': 10 * (myThis.curPageNum + i) + myThis.curPageNum + ''
});
}
// 列表总数量
myThis.totalNum = 60;
// 如果是最后一页
if (myThis.curPageNum * 10 >= myThis.totalNum) {
myThis.$refs.pullScroll.finish();
} else {
// 不是最后一页
myThis.$refs.pullScroll.success();
}
}, 600);
}
}
}
</script>
```
#### CSS
```css
<style>
page {
background-color: #f7f7f7;
}
.content {
display: flex;
flex-direction: column;
}
.mui-content-padded {
margin: 0px 14px;
/* background-color: #ffffff; */
}
.pullScrollView {
display: flex;
flex-direction: column;
}
</style>
```