uniapp分类左右联动

要实现 uniapp 分类左右联动，可以考虑以下步骤：

1. 定义分类数据结构。可以使用对象或数组来表示分类数据，包括分类名称和分类对应的数据。

2. 在页面中创建两个组件，一个用来展示分类列表，一个用来展示分类对应的数据。

3. 在分类列表组件中，绑定分类数据，并根据用户点击的分类名称，更新数据组件中展示的数据。

4. 在数据组件中，根据分类列表组件传递过来的分类名称，筛选出对应的数据进行展示。

5. （可选）为分类列表添加滚动事件，实现滚动到相应位置时高亮对应的分类。

以上是一种基本的实现方式，具体实现还需要根据具体需求来调整。

相关问题

完整代码实现 uniapp 分类左右联动

以下是一个简单的示例代码，演示了如何在 uniapp 中实现分类左右联动效果：

<template>
  <view class="container">
    <view class="left">
      <!-- 左侧分类列表 -->
      <scroll-view scroll-y="true">
        <view v-for="(category, index) in categories"
              :class="{ active: currentIndex === index }"
              @click="handleCategoryClick(index)">
          {{ category }}
        </view>
      </scroll-view>
    </view>
    <view class="right">
      <!-- 右侧商品列表 -->
      <scroll-view scroll-y="true">
        <view v-for="(product, index) in products" :key="product.id">
          <image :src="product.image" />
          <view>{{ product.name }}</view>
          <view>￥{{ product.price }}</view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: ['水果', '蔬菜', '肉类', '海鲜'], // 左侧分类列表
      products: [ // 右侧商品列表
        {
          id: 1,
          name: '苹果',
          price: 5,
          image: 'https://example.com/apple.png',
          category: '水果',
        },
        {
          id: 2,
          name: '香蕉',
          price: 3,
          image: 'https://example.com/banana.png',
          category: '水果',
        },
        {
          id: 3,
          name: '西红柿',
          price: 2,
          image: 'https://example.com/tomato.png',
          category: '蔬菜',
        },
        {
          id: 4,
          name: '鸡肉',
          price: 12,
          image: 'https://example.com/chicken.png',
          category: '肉类',
        },
        {
          id: 5,
          name: '虾',
          price: 20,
          image: 'https://example.com/shrimp.png',
          category: '海鲜',
        },
      ],
      currentIndex: 0, // 当前选中的分类索引
    };
  },
  methods: {
    handleCategoryClick(index) {
      // 点击分类列表时更新当前选中的分类索引
      this.currentIndex = index;
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.left {
  width: 30%;
  height: 100%;
  background-color: #f2f2f2;
  padding: 10px;
}
.left .active {
  color: #007aff;
  font-weight: bold;
}
.right {
  flex: 1;
  height: 100%;
  padding: 10px;
}
.right image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
</style>

在这个示例中，我们定义了一个 `categories` 数组作为左侧分类列表，以及一个 `products` 数组作为右侧商品列表。同时，我们使用了一个 `currentIndex` 变量来记录当前选中的分类索引。当用户点击左侧分类列表中的某个分类时，我们会更新 `currentIndex` 变量，然后根据当前选中的分类来过滤右侧商品列表中的商品。最后，我们使用了 `v-for` 指令来循环渲染左侧分类列表和右侧商品列表，并使用了 `class` 绑定来控制左侧选中的分类样式。

uniapp三级联动分类

Uniapp提供了Picker组件来实现三级联动分类。以下是一个简单的示例代码：

<template>
  <view>
    <picker :value="selected" mode="multiSelector" @change="onChange">
      <view class="picker">
        {{categories[selected[0]]}} > {{subCategories[selected[0]][selected[1]]}} > {{subSubCategories[selected[0]][selected[1]][selected[2]]}}
      </view>
    </picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        categories: ['分类1', '分类2', '分类3'],
        subCategories: [['子分类1-1', '子分类1-2'], ['子分类2-1', '子分类2-2'], ['子分类3-1', '子分类3-2']],
        subSubCategories: [[['子子分类1-1-1', '子子分类1-1-2'], ['子子分类1-2-1', '子子分类1-2-2']], [['子子分类2-1-1', '子子分类2-1-2'], ['子子分类2-2-1', '子子分类2-2-2']], [['子子分类3-1-1', '子子分类3-1-2'], ['子子分类3-2-1', '子子分类3-2-2']]],
        selected: [0, 0, 0]
      }
    },
    methods: {
      onChange(e) {
        this.selected = e.detail.value;
      }
    }
  }
</script>

<style>
  .picker {
    font-size: 18px;
    color: #007aff;
    text-align: center;
    padding: 30px 0;
  }
</style>

在组件中，我们使用了Picker组件，设置了mode为multiSelector。然后在data中定义了三个数组，分别表示三级分类，selected数组表示当前选中的分类。在模板中，我们显示了当前选中的分类，并在Picker组件上绑定了change事件，每次选中分类后，将会触发该事件，我们可以在事件处理函数中更新selected数组的值，以便更新显示的分类。