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.
This article introduces a component to you:
The front-end vue uni-app list component is simple, easy to use and universal; comes with the download address of the complete code: https://ext.dcloud.net.cn/plugin?id=12675
For more information on front-end components, please follow the WeChat public account: Front-end component development
The renderings are as follows:
#### Instructions
```How to use
<!-- proList: entry array data goProDetail: entry click event jump (realizes value transfer of click entry data) -->
<CCListView :proList="projectList" @click="goProDetail"></CCListView>
```
#### HTML code part
<template>
<view class="content">
<!-- List component-->
<div class="mui-content-padded">
<!-- proList: entry array data goProDetail: entry click event jump (realizes value transfer of click entry data) -->
<CCListView :proList="projectList" @click="goProDetail"></CCListView>
</div>
</view>
</template>
```
#### JS code (introducing components to fill in data)
```javascript
<script>
import CCListView from '../../components/ccList/CCListView.vue';
export default {
components: {
CCListView,
},
data() {
return {
// list array
projectList: []
}
},
onLoad () {
this.requestData();
},
methods: {
//List item click event
goProDetail(item) {
console.log("Item data = " + JSON.stringify(item));
},
requestData() {
//Simulate request parameter settings
let reqData = {
'area': '',
"pageSize": 10,
"pageNo": this.curPageNum
}
//Simulate request interface
this.totalNum = 39;
this.projectList = [];
for (let i = 0; i < 10; i++) {
this.projectList.push({
'proName': 'I am the project' + i,
'proUnit': 'I am details' + i,
'area': 'Guangzhou',
'proType': 'Provincial Project',
'stage': 'Construction has started',
'id': i + ''
});
}
}
}
}
</script>
```
#### CSS
```CSS
<style>
page {
background-color: #f7f7f7;
}
.content {
display: flex;
flex-direction: column;
}
.mui-content-padded {
margin: 0px 14px;
/* background-color: #ffffff; */
}
</style>
```