uniapp 商品分类页面，左侧导航，右侧商品

在uniapp中创建一个商品分类页面，通常包括左侧导航栏和右侧商品展示区域。以下是一个简单的示例，展示了如何实现这样的页面布局：

<template>
  <view class="container">
    <view class="nav">
      <!-- 导航栏内容 -->
      <view v-for="(item, index) in navList" :key="index" class="nav-item">
        {{ item.name }}
      </view>
    </view>
    <view class="goods">
      <!-- 商品展示 -->
      <view v-for="(item, index) in goodsList" :key="index" class="goods-item">
        <!-- 商品详细信息 -->
        <image :src="item.image" class="goods-image"></image>
        <view class="goods-info">
          <view class="goods-title">{{ item.title }}</view>
          <view class="goods-price">{{ item.price }} 元</view>
        </view>
      </view>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      navList: [
        { name: '电子产品' },
        { name: '服装服饰' },
        { name: '家居生活' },
        // ...更多导航项
      ],
      goodsList: [
        { image: '/path/to/image', title: '商品标题', price: 9.99 },
        { image: '/path/to/image', title: '商品标题', price: 19.99 },
        { image: '/path/to/image', title: '商品标题', price: 29.99 },
        // ...更多商品信息
      ]
    };
  }
};
</script>
 
<style scoped>
.container {
  display: flex;
}
 
.nav {
  width: 200px;
  background-color: #f0f0f0;
}
 
.nav-item {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
 
.goods {
  flex: 1;
  padding: 10px;
}
 
.goods-item {
  display: flex;
  margin-bottom: 10px;
}
 
.goods-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 10px;
}
 
.goods-info {
  flex: 1;
}
 
.goods-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
.goods-price {
  color: #f00;
}
</style>

这个示例中，左侧导航栏由一个循环渲染navList数组中的数据生成，每个导航项通常会对应右侧商品列表中的一个分类。右侧的商品区域通过循环渲染goodsList数组来展示商品，每个商品包括图片、标题和价格。样式表中定义了基本的布局和样式，确保页面的正常显示。

请根据实际的数据结构和API接口调整navList和goodsList中的数据，以及商品详情页面的图片、标题和价格信息。