uni-app 实现多分类选择栏功能

在uni-app中实现多分类选择栏功能，你可以利用Vue的数据绑定和事件处理机制来完成。以下是一个简单的示例代码，展示了如何实现这一功能。

首先，在pages/index/index.vue文件中，定义页面结构和数据逻辑：

<template>
  <view class="container">
    <view class="category-list">
      <checkbox-group @change="handleCheckboxChange">
        <label v-for="category in categories" :key="category.id">
          <checkbox :value="category.id">{{ category.name }}</checkbox>
        </label>
      </checkbox-group>
    </view>
    <view class="selected-categories">
      <text>已选择分类: {{ selectedCategories.join(', ') }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { id: 1, name: '分类1' },
        { id: 2, name: '分类2' },
        { id: 3, name: '分类3' },
        // 更多分类...
      ],
      selectedCategories: []
    };
  },
  methods: {
    handleCheckboxChange(event) {
      this.selectedCategories = event.detail.value;
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}

.category-list {
  margin-bottom: 20px;
}

.selected-categories {
  font-size: 16px;
  color: #333;
}
</style>

代码说明：

1. 模板部分 (<template>):

   • 使用checkbox-group组件包裹多个label和checkbox组件，用于创建多选框列表。
   • v-for指令遍历categories数组，动态生成每个分类的多选框。
   • 绑定@change事件处理函数handleCheckboxChange，当多选框状态改变时触发。

2. 脚本部分 (<script>):

   • 定义categories数组，包含分类的ID和名称。
   • 定义selectedCategories数组，用于存储已选择的分类ID。
   • handleCheckboxChange方法接收事件对象，更新selectedCategories数组。

3. 样式部分 (<style>):

   • 简单的样式定义，使页面看起来更整洁。

运行效果：

• 页面加载时，显示分类列表，每个分类前有一个多选框。
• 用户可以选择多个分类，选择结果会实时反映在已选择分类区域。

这个示例展示了基本的实现思路，你可以根据实际需求进行扩展，比如添加分类的加载动画、分类搜索功能等。