With the development of technology, the complexity of development is getting higher and higher. The traditional development method makes a system into a whole application. It often happens that a small change or the addition of a small function may cause the overall logic to change. The modification affects the whole body. Through component development, individual development and maintenance can be effectively achieved, and they can be combined at will. Greatly improve low development efficiency and reduce maintenance costs.
Componentization is the only way for any front-end application with complex business scenarios and products after multiple iterations. Componentization requires more than just the module splitting and decoupling seen on the surface. There is also a lot of work behind it to support componentization, such as module splitting strategies based on business characteristics, interaction methods between modules, and building systems. etc.
The components introduced in this article are:
The front-end vue pull-up load pull-down refresh component supports list paging and local paging. To download the complete code, please visit the uni-app plug-in market address: https://ext.dcloud.net.cn/plugin?id=12942
For more information on front-end components, please follow the WeChat public account: Front-end component development
The rendering is as follows:
#### Instructions
```How to use
<!-- pullDown: pull down to refresh back-top: return to the top -->
<ccPullScroll class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
</ccPullScroll>
```
#### HTML code part
```html
<template>
<view class="content">
<!-- -->
<div class="mui-content-padded">
<!-- pullDown: pull down to refresh back-top: return to the top -->
<ccPullScroll class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
<!-- List component-->
<CCBProjectList :productList="projectList" @click="goProDetail"></CCBProjectList>
</ccPullScroll>
</div>
</view>
</template>
```
#### JS code (introducing components to fill in data)
```javascript
<script>
import CCBProjectList from '../../components/ccPageView/CCProjectList.vue';
import ccPullScroll from '../../components/ccPullScroll/index.vue'
export default {
components: {
CCBProjectList,
ccPullScroll
},
data() {
return {
//Total number of lists
totalNum: 60,
//The page number starts with 1 by default
whyPageNum: 1,
// list array
projectList: []
}
},
mounted() {
//The page refresh method will automatically call pulldown once
this.pageRefresh();
},
methods: {
pageRefresh() {
let myThis = this;
this.$nextTick(() => {
myThis.$refs.pullScroll.refresh();
});
},
pullDown(pullScroll) {
console.log('Pull down to refresh');
this.projectList = [];
this.curPageNum = 1;
setTimeout(() => {
this.requestData(pullScroll);
}, 300);
},
// pull up to load
onReachBottom() {
// All data is loaded
if (this.curPageNum * 10 >= this.totalNum) {
} else {
this.curPageNum++;
this.requestData();
}
},
//List item click event
goProDetail(item) {
},
requestData() {
//Simulate request parameter settings
let reqData = {
'area': '',
"pageSize": 10,
"pageNo": this.curPageNum
}
let myThis = this;
setTimeout(function() {
//Simulate request interface
for (let i = 0; i < 10; i++) {
myThis.projectList.push({
'proName': 'Product Name' + i,
'proUnit': 'Company name' + i,
'area': 'Guangdong Province',
'proType': 'Provincial Project',
'stage': 'Construction has started',
'id': 10 * (myThis.curPageNum + i) + myThis.curPageNum + ''
});
}
//Total number of lists
myThis.totalNum = 60;
// If it is the last page
if (myThis.curPageNum * 10 >= myThis.totalNum) {
myThis.$refs.pullScroll.finish();
} else {
// Not the last page
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>
```