隨著技術的發展，開發的復雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身，
通過組件化開發，可以有效實作單獨開發，單獨維護，而且他們之間可以隨意的進行組合，大大提升開發效率低，降低維護成本， 組件化對于任何一個業務場景復雜的前端應用以及經過多次迭代之后的產品來說都是必經之路，
今天給大家介紹的一款組件是：自定義精美商品分類串列組件 側邊欄商品分類組件 category組件 左邊分類category 右邊串列List， 可用于電商平臺分類串列展示；附帶完整原始碼下載地址： https://ext.dcloud.net.cn/plugin?id=13458
效果圖如下：
cc-twoCate
使用方法
<!-- colors：選中顏色 current：串列選擇序列 左邊分類資料 dataList：右邊串列資料 @cateClick：左邊分類點擊 @itemClick：右邊條目點擊 -->
<cc-twoCate colors="#fa436a" :current="currentTwo" :classList="categoryList" :dataList="dataList"
:hideShow="true" @cateClick="cateClick" @itemClick="itemClick"></cc-twoCate>
HTML代碼實作部分
<template>
<view >
<!-- 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556886.html
標籤：其他
上一篇：記錄拖動排序
下一篇：返回列表