<template>
<view class="detail-container">
<view class="navigation">
<view class="navigation_icon" @click="gotosearch">
<image class="search-icon" src="/static/搜索.png" mode=""></image>
</view>
</view>
<!-- 导航栏 -->
<view class="nav-bar">
<view v-for="(category, index) in categories" :key="index" class="nav-item"
:class="{ active: currentIndex === index }" @click="selectCategory(index)">
{{ category.name }}
</view>
</view>
<!-- 商品列表 -->
<view class="product-list">
<view v-for="(product, index) in currentProducts" :key="index" class="product-item"
@click="gotoDetails(product)">
<image :src="product.image" class="product-image"></image>
<text class="product-name">{{ product.name }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 分类数据
categories: [{
name: "精选推荐",
products: [{
name: "商品1",
image: "/static/大商品.png"
},
{
name: "商品2",
image: "/static/商品.png"
},
{
name: "商品3",
image: "/static/商品.png"
},
{
name: "商品4",
image: "/static/商品.png"
},
{
name: "商品5",
image: "/static/商品.png"
},
{
name: "商品6",
image: "/static/商品.png"
},
{
name: "商品7",
image: "/static/商品.png"
},
{
name: "商品8",
image: "/static/商品.png"
},
{
name: "商品9",
image: "/static/商品.png"
},
{
name: "商品10",
image: "/static/商品.png"
}
]
},
{
name: "商务文具",
products: [{
name: "商品1",
image: "/static/大商品.png"
},
{
name: "商品2",
image: "/static/商品.png"
},
{
name: "商品3",
image: "/static/商品.png"
},
{
name: "商品4",
image: "/static/商品.png"
},
{
name: "商品5",
image: "/static/商品.png"
},
{
name: "商品6",
image: "/static/商品.png"
},
{
name: "商品7",
image: "/static/商品.png"
},
{
name: "商品8",
image: "/static/商品.png"
},
{
name: "商品9",
image: "/static/商品.png"
},
{
name: "商品10",
image: "/static/商品.png"
}
]
},
{
name: "家具生活",
products: [{
name: "商品1",
image: "/static/大商品.png"
},
{
name: "商品2",
image: "/static/商品.png"
},
{
name: "商品3",
image: "/static/商品.png"
},
{
name: "商品4",
image: "/static/商品.png"
},
{
name: "商品5",
image: "/static/商品.png"
},
{
name: "商品6",
image: "/static/商品.png"
},
{
name: "商品7",
image: "/static/商品.png"
},
{
name: "商品8",
image: "/static/商品.png"
},
{
name: "商品9",
image: "/static/商品.png"
},
{
name: "商品10",
image: "/static/商品.png"
}
]
},
{
name: "数码家电",
products: [{
name: "商品1",
image: "/static/大商品.png"
},
{
name: "商品2",
image: "/static/商品.png"
},
{
name: "商品3",
image: "/static/商品.png"
},
{
name: "商品4",
image: "/static/商品.png"
},
{
name: "商品5",
image: "/static/商品.png"
},
{
name: "商品6",
image: "/static/商品.png"
},
{
name: "商品7",
image: "/static/商品.png"
},
{
name: "商品8",
image: "/static/商品.png"
},
{
name: "商品9",
image: "/static/商品.png"
},
{
name: "商品10",
image: "/static/商品.png"
}
]
}
],
// 当前选中的分类索引
currentIndex: 0,
// 当前显示的商品列表
currentProducts: []
}
},
methods: {
// 跳转到搜索页面
gotosearch() {
uni.navigateTo({
url: "/pages/Classification/search"
});
},
// 跳转到搜索页面
gotoClassification() {
uni.navigateTo({
url: "/pages/Classification/Classification"
});
},
// 点击分类项
selectCategory(index) {
this.currentIndex = index;
this.currentProducts = this.categories[index].products;
},
// 跳转到商品详情页
gotoDetails(product) {
console.log("跳转到商品详情页:", product);
uni.navigateTo({
url: `/pages/Classification/Claassification-Details?product=${JSON.stringify(product)}`
});
}
}
}
</script>
<style>
.detail-container {
display: flex;
flex-direction: column;
height: 100vh;
.navigation {
width: 100%;
height: 50px;
display: flex;
position: fixed;
top: 0;
background-color: transparent;
justify-content: flex-end;
/* 让内容靠右 */
align-items: center;
padding-right: 20rpx;
/* 右侧留出一些空间 */
}
.navigation_icon {
display: flex;
align-items: center;
}
.search-icon {
width: 40rpx;
height: 40rpx;
}
.nav-bar {
display: flex;
overflow-x: auto;
white-space: nowrap;
background-color: #f5f5f5;
padding: 10rpx 0;
.nav-item {
margin: 0 20rpx;
padding: 10rpx 20rpx;
font-size: 28rpx;
color: #333;
&.active {
color: #1aad19;
font-weight: bold;
}
}
}
.product-list {
display: flex;
flex-wrap: wrap;
padding: 20rpx;
.product-item {
width: 50%;
box-sizing: border-box;
padding: 10rpx;
.product-image {
width: 100%;
height: 200rpx;
border-radius: 10rpx;
}
.product-name {
text-align: center;
font-size: 24rpx;
color: #333;
margin-top: 10rpx;
}
}
}
}
</style>为什么上述代码点击搜索符无法跳转至搜索页
最新发布
扫一扫
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
