uni-app 侧边导航分类功能，适用于商品分类页面

在实现uni-app中的侧边导航分类功能时，可以利用uni-list和uni-list-item组件来构建分类列表，并结合uni.navigateTo或uni.redirectTo方法实现分类页面的跳转。以下是一个简化的代码示例，展示了如何实现这一功能。

1. 创建侧边栏页面（sidebar.vue）

<template>
  <view class="sidebar">
    <uni-list>
      <uni-list-item v-for="(category, index) in categories" :key="index" @click="navigateToCategory(category.url)">
        <text>{{ category.name }}</text>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { name: '电子产品', url: '/pages/category/electronics/electronics' },
        { name: '服装配饰', url: '/pages/category/clothes/clothes' },
        { name: '家居生活', url: '/pages/category/home/home' },
        // 更多分类...
      ]
    };
  },
  methods: {
    navigateToCategory(url) {
      uni.navigateTo({
        url: url
      });
    }
  }
};
</script>

<style scoped>
.sidebar {
  width: 250px;
  background-color: #fff;
}
uni-list-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
</style>

2. 创建分类详情页面（例如electronics.vue）

<template>
  <view class="category-page">
    <text>电子产品分类页面</text>
    <!-- 这里可以添加具体的商品列表或详情 -->
  </view>
</template>

<script>
export default {
  // 页面逻辑可以根据需要添加
};
</script>

<style scoped>
.category-page {
  padding: 20px;
}
</style>

3. 配置页面路径（pages.json）

确保在pages.json中配置了侧边栏页面和各个分类详情页面的路径：

{
  "pages": [
    {
      "path": "pages/sidebar/sidebar",
      "style": {
        "navigationBarTitleText": "侧边导航"
      }
    },
    {
      "path": "pages/category/electronics/electronics",
      "style": {
        "navigationBarTitleText": "电子产品"
      }
    },
    {
      "path": "pages/category/clothes/clothes",
      "style": {
        "navigationBarTitleText": "服装配饰"
      }
    },
    {
      "path": "pages/category/home/home",
      "style": {
        "navigationBarTitleText": "家居生活"
      }
    }
    // 更多页面配置...
  ]
}

通过上述代码，你可以在uni-app中实现一个简单的侧边导航分类功能。根据实际需求，你可以进一步扩展和优化这个基础示例。