vue实现淘宝筛选

实现淘宝筛选功能

使用Vue实现类似淘宝的筛选功能需要结合组件化、状态管理和UI交互设计。以下是一个完整的实现方案：

数据准备

筛选功能需要定义数据结构，通常包括分类、品牌、价格区间等维度：

data() {
  return {
    filters: {
      categories: [
        { id: 1, name: '女装', sub: ['T恤', '连衣裙', '裤子'] },
        { id: 2, name: '男装', sub: ['衬衫', '牛仔裤', '外套'] }
      ],
      brands: [
        { id: 101, name: '耐克' },
        { id: 102, name: '阿迪达斯' }
      ],
      priceRanges: [
        { min: 0, max: 100 },
        { min: 100, max: 200 }
      ]
    },
    selectedFilters: {
      category: [],
      brand: [],
      price: []
    }
  }
}

筛选组件实现

创建可复用的筛选组件：

<template>
  <div class="filter-section">
    <h3>{{ title }}</h3>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        :id="`${type}-${item.id}`"
        :value="item"
        v-model="selectedItems"
      >
      <label :for="`${type}-${item.id}`">{{ item.name || formatPrice(item) }}</label>
    </div>
  </div>
</template>

<script>
export default {
  props: ['title', 'items', 'type'],
  computed: {
    selectedItems: {
      get() {
        return this.$store.state.selectedFilters[this.type]
      },
      set(value) {
        this.$store.commit('updateFilter', { type: this.type, value })
      }
    }
  },
  methods: {
    formatPrice(item) {
      return `${item.min}-${item.max}元`
    }
  }
}
</script>

状态管理

使用Vuex管理筛选状态：

const store = new Vuex.Store({
  state: {
    selectedFilters: {
      category: [],
      brand: [],
      price: []
    }
  },
  mutations: {
    updateFilter(state, payload) {
      state.selectedFilters[payload.type] = payload.value
    },
    resetFilters(state) {
      state.selectedFilters = {
        category: [],
        brand: [],
        price: []
      }
    }
  }
})

商品列表组件

根据筛选条件过滤商品：

<template>
  <div class="product-list">
    <div v-for="product in filteredProducts" :key="product.id">
      <img :src="product.image" :alt="product.name">
      <h4>{{ product.name }}</h4>
      <p>¥{{ product.price }}</p>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    filteredProducts() {
      return this.$store.getters.filteredProducts
    }
  }
}
</script>

筛选逻辑

在Vuex中实现商品过滤逻辑：

getters: {
  filteredProducts: (state) => {
    return products.filter(product => {
      const categoryMatch = state.selectedFilters.category.length === 0 || 
        state.selectedFilters.category.some(cat => product.category === cat.id)

      const brandMatch = state.selectedFilters.brand.length === 0 ||
        state.selectedFilters.brand.some(brand => product.brand === brand.id)

      const priceMatch = state.selectedFilters.price.length === 0 ||
        state.selectedFilters.price.some(range => 
          product.price >= range.min && product.price <= range.max)

      return categoryMatch && brandMatch && priceMatch
    })
  }
}

响应式布局

实现适应不同屏幕尺寸的布局：

.filter-container {
  display: flex;
  flex-wrap: wrap;
}

.filter-section {
  width: 200px;
  margin-right: 20px;
  padding: 15px;
  background: #f5f5f5;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

@media (max-width: 768px) {
  .filter-container {
    flex-direction: column;
  }
  .filter-section {
    width: 100%;
    margin-bottom: 10px;
  }
}

交互增强

添加折叠功能提升用户体验：

<template>
  <div class="filter-section">
    <div class="filter-header" @click="toggleCollapse">
      <h3>{{ title }}</h3>
      <span>{{ isCollapsed ? '+' : '-' }}</span>
    </div>
    <div v-if="!isCollapsed">
      <!-- 筛选内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

性能优化

对于大量数据时使用虚拟滚动：

<template>
  <RecycleScroller
    class="product-list"
    :items="filteredProducts"
    :item-size="200"
    key-field="id"
  >
    <template v-slot="{ item }">
      <div class="product-item">
        <img :src="item.image" :alt="item.name">
        <h4>{{ item.name }}</h4>
        <p>¥{{ item.price }}</p>
      </div>
    </template>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: {
    RecycleScroller
  }
}
</script>

完整示例集成

将所有组件整合到主页面：

<template>
  <div class="container">
    <div class="filter-container">
      <filter-section 
        title="分类" 
        :items="filters.categories" 
        type="category"
      />
      <filter-section 
        title="品牌" 
        :items="filters.brands" 
        type="brand"
      />
      <filter-section 
        title="价格" 
        :items="filters.priceRanges" 
        type="price"
      />
      <button @click="resetFilters">重置筛选</button>
    </div>

    <product-list />
  </div>
</template>

<script>
import FilterSection from './FilterSection.vue'
import ProductList from './ProductList.vue'

export default {
  components: {
    FilterSection,
    ProductList
  },
  data() {
    return {
      filters: {
        // 筛选数据
      }
    }
  },
  methods: {
    resetFilters() {
      this.$store.commit('resetFilters')
    }
  }
}
</script>

这个实现方案包含了淘宝筛选功能的主要特点：多维度筛选、实时过滤、响应式布局和良好的用户体验。可以根据实际需求调整筛选维度和交互细节。