前端Vue自定義簡(jiǎn)單好用商品分類列表組件 側(cè)邊欄商品分類組件?， 下載完整代碼請(qǐng)?jiān)L問(wèn)uni-app插件市場(chǎng)地址：https://ext.dcloud.net.cn/plugin?id=13148
效果圖如下：
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-495798.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-495798.html
cc-defineCateList
使用方法
<!-- data:商品列表數(shù)組[{navtitle:標(biāo)題 shop:[] 展示列表}] @click:商品條目點(diǎn)擊事件-->
<cc-defineCateList :data="data" @click="cateItemClick"></cc-defineCateList>
HTML代碼實(shí)現(xiàn)部分
<template>
<view class="content">
<!-- 自定義頂部搜索框 用于搜索跳轉(zhuǎn) skipUrl:跳轉(zhuǎn)url為絕對(duì)路徑 /pages開頭 -->
<cc-headSearch skipUrl="/pages/index/search"></cc-headSearch>
<!-- data:商品列表數(shù)組[{navtitle:標(biāo)題 shop:展示列表}] @click:商品條目點(diǎn)擊事件-->
<cc-defineCateList :data="data" @click="cateItemClick"></cc-defineCateList>
</view>
</template>
<script>
export default {
data() {
return {
// 列表數(shù)組 navtitle:標(biāo)題 shop:展示列表
data: [{
navtitle: '精品推薦1',
shop: [{
shoptitle: "手機(jī)一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機(jī)二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機(jī)三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機(jī)四",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: '手機(jī)數(shù)碼2',
shop: [{
shoptitle: "手機(jī)一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機(jī)二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機(jī)三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機(jī)四",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: '聲學(xué)設(shè)備3',
shop: [{
shoptitle: "手機(jī)一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機(jī)二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機(jī)三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機(jī)四",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: '精品推薦4',
shop: [{
shoptitle: "手機(jī)一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機(jī)二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機(jī)三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機(jī)四",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: '手機(jī)數(shù)碼5',
shop: [{
shoptitle: "手機(jī)一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機(jī)二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機(jī)三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機(jī)四",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: '手機(jī)數(shù)碼6',
shop: [{
shoptitle: "手機(jī)一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機(jī)二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機(jī)三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機(jī)四",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: '手機(jī)數(shù)碼7',
shop: [{
shoptitle: "手機(jī)一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機(jī)二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機(jī)三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機(jī)四",
shopimage: "../../static/image/p4.png",
}
]
},
]
}
},
mounted() {
},
methods: {
cateItemClick(item) {
uni.showModal({
title: '點(diǎn)擊條目',
content: '點(diǎn)擊條目數(shù)據(jù) = ' + JSON.stringify(item)
})
}
}
}
</script>
<style>
page {
background-color: #f7f7f7;
}
.content {
display: flex;
flex-direction: column;
}
</style>
到了這里，關(guān)于前端Vue自定義簡(jiǎn)單好用商品分類列表組件 側(cè)邊欄商品分類組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
