前端Vue自定義簡單好用商品分類串列組件 側邊欄商品分類組件 ， 下載完整代碼請訪問uni-app插件市場地址：https://ext.dcloud.net.cn/plugin?id=13148
效果圖如下：
cc-defineCateList
使用方法
<!-- data:商品串列陣列[{navtitle:標題 shop:[] 展示串列}] @click:商品條目點擊事件-->
<cc-defineCateList :https://www.cnblogs.com/ccVue/archive/2023/06/22/https://www.cnblogs.com/ccVue/archive/2023/06/22/data="data" @click="cateItemClick"></cc-defineCateList>
HTML代碼實作部分
<template>
<view >
<!-- 自定義頂部搜索框 用于搜索跳轉 skipUrl:跳轉url為絕對路徑 /pages開頭 -->
<cc-headSearch skipUrl="/pages/index/search"></cc-headSearch>
<!-- data:商品串列陣列[{navtitle:標題 shop:展示串列}] @click:商品條目點擊事件-->
<cc-defineCateList :https://www.cnblogs.com/ccVue/archive/2023/06/22/https://www.cnblogs.com/ccVue/archive/2023/06/22/data="data" @click="cateItemClick"></cc-defineCateList>
</view>
</template>
<script>
export default {
data() {
return {
// 串列陣列 navtitle:標題 shop:展示串列
data: [{
navtitle: '精品推薦1',
shop: [{
shoptitle: "手機一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機四",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: '手機數碼2',
shop: [{
shoptitle: "手機一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機四",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: '聲學設備3',
shop: [{
shoptitle: "手機一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機四",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: '精品推薦4',
shop: [{
shoptitle: "手機一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機四",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: '手機數碼5',
shop: [{
shoptitle: "手機一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機四",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: '手機數碼6',
shop: [{
shoptitle: "手機一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機四",
shopimage: "../../static/image/p4.png",
}
]
},
{
navtitle: '手機數碼7',
shop: [{
shoptitle: "手機一",
shopimage: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
},
{
shoptitle: "手機二",
shopimage: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
},
{
shoptitle: "手機三",
shopimage: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
},
{
shoptitle: "手機四",
shopimage: "../../static/image/p4.png",
}
]
},
]
}
},
mounted() {
},
methods: {
cateItemClick(item) {
uni.showModal({
title: '點擊條目',
content: '點擊條目資料 = ' + JSON.stringify(item)
})
}
}
}
</script>
<style>
page {
background-color: #f7f7f7;
}
.content {
display: flex;
flex-direction: column;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555817.html
標籤：其他
下一篇：返回列表