Title: Front-end component development of customized exquisite product classification list components
I. Introduction
With the rapid development of front-end technology and the continuous growth of application requirements, traditional development methods are no longer able to meet the needs of modern complex business scenarios. In order to improve development efficiency and reduce maintenance costs, component development has become a necessary means to build complex front-end applications. Through component development, we can split a system into a series of reusable independent components, achieve separate development and maintenance, and can be combined at will, greatly improving development efficiency and flexibility.
In various complex business scenarios, product classification lists are a common requirement, especially on e-commerce platforms. In order to meet this demand, we have introduced a custom exquisite product classification list component, which can help developers quickly build a product classification list with high customization and good user experience.
2. Introduction to custom product classification list components
The custom product classification list component is a general sidebar product classification component named cc-twoCate. It contains a category list on the left and a product list on the right, which can be easily used for category list display on e-commerce platforms. By introducing this component, users can easily implement functions such as display, selection and management of product categories. Attached is the complete source code download address: https://ext.dcloud.net.cn/plugin?id=13458
For more information on front-end components, please follow the WeChat public account: Front-end component development
The renderings are as follows:
3. Technical implementation
The implementation of the cc-twoCate component is based on the Vue.js framework. By using the component development model of Vue.js, we can split the complex product classification list into multiple independent sub-components, each sub-component is responsible for handling specific functions and styles.
This component accepts a series of attributes as input, including selected color, current selection sequence, classification data on the left and list data on the right. At the same time, it also provides some event callback functions, such as left category click and right item click, etc., so that users can perform corresponding operations when specific events occur.
During the implementation process, we adopted the design concept of high customization and scalability, allowing users to adjust the style and functionality according to their own needs. In addition, we also provide some commonly used styles and interactive effects to help users quickly build product classification lists with beautiful appearance and smooth experience.
4. How to use
cc-twoCate
Instructions
<!-- colors：选中颜色 current：列表选择序列 左边分类数据 dataList：右边列表数据 @cateClick：左边分类点击 @itemClick：右边条目点击 -->
<cc-twoCate colors="#fa436a" :current="currentTwo" :classList="categoryList" :dataList="dataList"
:hideShow="true" @cateClick="cateClick" @itemClick="itemClick"></cc-twoCate>
HTML code implementation part
<template>
<view class="content">
<!-- colors：选中颜色 current：列表选择序列 左边分类数据 dataList：右边列表数据 @cateClick：左边分类点击 @itemClick：右边条目点击 -->
<cc-twoCate colors="#fa436a" :current="currentTwo" :classList="categoryList" :dataList="dataList"
:hideShow="true" @cateClick="cateClick" @itemClick="itemClick"></cc-twoCate>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
//分类列表
categoryList: [{
id: 1,
name: '今日推荐',
}, {
id: 2,
name: '每日特惠',
}, {
id: 3,
name: '进口水果',
}, {
id: 4,
name: '蔬菜豆制品',
}, {
id: 5,
name: '肉禽蛋',
}, {
id: 6,
name: '海鲜水产',
}, {
id: 7,
name: '粮油调味',
}, {
id: 8,
name: '熟食卤味',
}, {
id: 9,
name: '冻品面点',
}, {
id: 10,
name: '乳品烘培',
}],
// 选中序列
currentTwo: 0,
// 右边列表数据
dataList: [{
title: '精美五彩水果',
goods_id: 201,
money: '35.90',
number: 1,
hmoney: '45.90',
img: 'https://cdn.pixabay.com/photo/2019/05/14/17/11/fruit-4202929_1280.png',
youhui: true,
baoyou: false,
status: 1, //商品过期状态 0正常 1已失效
stock: 600,
},
{
title: '智利进口新鲜车厘子',
goods_id: 202,
money: '29.9',
number: 75,
hmoney: '39.90',
img: 'https://cdn.pixabay.com/photo/2016/10/30/18/01/apple-1783882_1280.png',
youhui: false,
baoyou: true,
status: 0, //商品过期状态 0正常 1已失效
stock: 100,
},
{
title: '伊犁冰淇淋',
type: 3,
goods_id: 203,
money: '152.00 ',
number: 1,
hmoney: '162.00',
img: 'https://cdn.pixabay.com/photo/2016/03/23/15/00/ice-cream-1274894_1280.jpg',
youhui: true,
baoyou: true,
status: 0, //商品过期状态 0正常 1已失效
stock: 200,
},
{
title: '黑美人西瓜5kg',
type: 6,
goods_id: 204,
money: '52.00 ',
number: 1,
hmoney: '99.00 ',
youhui: false,
baoyou: false,
stock: 100,
img: 'https://cdn.pixabay.com/photo/2017/06/02/18/24/watermelon-2367029_1280.jpg',
status: 0, //商品过期状态 0正常 1已失效
},
{
title: '4杯鸡蛋布甸（双层）',
type: 4,
goods_id: 205,
money: '25.80',
number: 1,
hmoney: 35.00,
img: '/static/images/goods/four.jpg',
youhui: true,
baoyou: false,
stock: 500,
status: 0, //商品过期状态 0正常 1已失效
},
{
title: '云南草莓夏季草莓新鲜水果3斤礼盒装',
type: 5,
goods_id: 206,
money: '59.90',
number: 200,
hmoney: '70.90',
youhui: true,
baoyou: true,
img: '/static/images/goods/five.jpg',
status: 0, //商品过期状态 0正常 1已失效
stock: 140,
}
],
};
},
methods: {
cateClick(item) {
uni.showModal({
title: "点击分类条目",
content: '点击分类条目 = ' + JSON.stringify(item)
})
},
itemClick(e) {
uni.showModal({
title: "点击右边商品条目",
content: '点击右边商品条目 = ' + JSON.stringify(e)
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
}
</style>
Using a custom product category list component is very simple, just follow these steps:
Introduce Vue.js and required component files into the project.
Introduce the cc-twoCate tag where the component needs to be used, and set the corresponding attributes and event callback functions.
Adjust component styles and configuration parameters according to needs to adapt to specific business scenarios.
When a component needs to be updated or modified, only the corresponding component file needs to be modified, without large-scale adjustments to the entire application.
5. Application scenarios
The custom product category list component is suitable for various scenarios where product categories and lists need to be displayed, and has wide application prospects especially on e-commerce platforms. By using this component, developers can easily build product classification lists with high customization and good user experience, improving development efficiency and flexibility.
6. Summary
With the development of front-end technology and the growth of business needs, component development has become a necessary means to build efficient, maintainable and scalable front-end applications. This article introduces the technical implementation and usage of the custom product classification list component, and demonstrates the component's superior performance and wide applicability through practical application scenarios. By using this component, developers can quickly build product classification lists with high customization and good user experience to meet the needs of modern complex business scenarios.