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:
Front-end Vue customizes simple and easy-to-use product classification list component and sidebar product classification component. To download the complete code, please visit the uni-app plug-in market address: https://ext.dcloud.net.cn/plugin?id=13148
For more information on front-end components, please follow the WeChat public account: Front-end component development
The renderings are as follows:
# cc-defineCateList
#### Instructions
```How to use
<!-- data: product list array [{navtitle: title shop: [] display list}] @click: product entry click event -->
<cc-defineCateList :data="data" @click="cateItemClick"></cc-defineCateList>
```
#### HTML code implementation part
```html
<template>
<view class="content">
<!-- The custom top search box is used to search for jump skipUrl: the jump url starts with the absolute path/pages -->
<cc-headSearch skipUrl="/pages/index/search"></cc-headSearch>
<!-- data: product list array [{navtitle: title shop: display list}] @click: product item click event -->
<cc-defineCateList :data="data" @click="cateItemClick"></cc-defineCateList>
</view>
</template>
<script>
export default {
data() {
return {
// List array navtitle: title shop: display list
data: [{
navtitle: 'High Quality Recommendation 1',
shop: [{
shoptitle: "Mobile phone one",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "Mobile phone two",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "Mobile phone three",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "Mobile phone four",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: 'Mobile Digital 2',
shop: [{
shoptitle: "Mobile phone one",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "Mobile phone two",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "Mobile phone three",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "Mobile phone four",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: 'Acoustic Equipment 3',
shop: [{
shoptitle: "Mobile phone one",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "Mobile phone two",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "Mobile phone three",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "Mobile phone four",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: 'High Quality Recommendation 4',
shop: [{
shoptitle: "Mobile phone one",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "Mobile phone two",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "Mobile phone three",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "Mobile phone four",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: 'Mobile Digital 5',
shop: [{
shoptitle: "Mobile phone one",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "Mobile phone two",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "Mobile phone three",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "Mobile phone four",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: 'Mobile phone digital 6',
shop: [{
shoptitle: "Mobile phone one",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "Mobile phone two",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "Mobile phone three",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "Mobile phone four",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: 'Mobile Digital 7',
shop: [{
shoptitle: "Mobile phone one",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "Mobile phone two",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "Mobile phone three",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "Mobile phone four",
shopimage: "../../static/image/p4.png",
}
]
},
]
}
},
mounted() {
},
methods: {
cateItemClick(item) {
uni.showModal({
title: 'Click on the entry',
content: 'Click item data = ' + JSON.stringify(item)
})
}
}
}
</script>
<style>
page {
background-color: #f7f7f7;
}
.content {
display: flex;
flex-direction: column;
}
</style>
```