前端使用js实现多个种类筛选

文章目录

• • 概要
  • 流程
  • 小结

概要

实现类似以下图片的效果

整体架构流程

1.在HTML模板中创建一个容器，用于放置筛选组件

<view>
  <view class="filter-container">
    <view class="filter-item" v-for="(item, index) in filters" :key="index">
      <text>{{ item.name }}</text>
      <view class="filter-values">
        <view class="filter-value" 
          v-for="(value, index) in item.values" 
          :key="index"
          @click="handleFilterClick(item.id, value.id)">
          {{ value.name }}
        </view>
      </view>
    </view>
  </view>
</view>

2.在vue数据对象中定义筛选条件

data() {
  return {
    filters: [
      {
        id: 1,
        name: '选择类型',
        values: [
          { id: 1, name: '全部' },
          { id: 2, name: '盒子' },
          { id: 3, name: 'x86' },
        ],
      },
      {
        id: 2,
        name: '选择状态',
        values: [
          { id: 1, name: '全部' },
          { id: 2, name: '在线' },
          { id: 3, name: '离线' },
        ],
      },
    ],
    selectedFilters: {},
  };
}

3.处理筛选点击事件的方法

methods: {
  handleFilterClick(filterId, valueId) {
    this.selectedFilters = {
      ...this.selectedFilters,
      [filterId]: valueId,
    };
    this.fetchData();
  },
},

4.实现获取数据的方法（异步请求）

methods: {
  async fetchData() {
    // 在此处发送异步请求，并根据选中的筛选条件过滤数据
    // 例如，使用 `uni.request` 发送 HTTP 请求
    const response = await uni.request({
      url: '***/api/data',
      data: this.selectedFilters,
    });
    
    this.items = response.data.items;
  },
},

5.在created生命周期里初始化数据

created() {
  this.fetchData();
},

小结

以上展示了uniapp项目中实现多个种类的筛选，可根据具体需求，对代码进行相关调整和优化