uni-app实战：实现商品搜索与筛选

在电商应用中，商品搜索与筛选功能是核心体验之一。通过本文，我们将探讨如何使用uni-app框架来构建一个具有高效搜索和灵活筛选功能的商品列表页面。我们将深入介绍从需求分析到具体实现的全过程，包括前端逻辑设计、数据获取、以及用户交互优化。

1. 需求分析

1.1 功能需求

• 搜索功能：用户能输入关键词搜索商品。
• 筛选功能：允许用户根据商品类型、价格区间、品牌等条件筛选商品。
• 结果展示：清晰地展示搜索或筛选后的商品列表，包括商品图片、名称、价格等信息。

1.2 技术选型

• 前端框架：uni-app，支持跨平台开发（iOS/Android）。
• 数据源：假设我们已有一个后端API接口用于获取商品数据。
• 技术栈：Vue.js, Vuex (状态管理), Axios (网络请求)。

2. 设计与实现

2.1 页面布局与组件设计

HTML结构

<template>
  <view class="search-screen">
    <view class="search-bar">
      <input type="text" placeholder="搜索商品" v-model="searchKeyword" />
    </view>
    <view class="filter-section">
      <!-- 商品类型筛选 -->
      <picker mode="selector" :range="['所有类型', '电子产品', '家居用品', '服饰']" @change="onTypeChange">
        <view>商品类型:</view>
      </picker>
      
      <!-- 价格区间筛选 -->
      <picker mode="slider" :range="['0 - 500', '500 - 1000', '1000以上']" @change="onPriceRangeChange">
        <view>价格区间:</view>
      </picker>
      
      <!-- 品牌筛选 -->
      <picker mode="selector" :range="brands" @change="onBrandChange">
        <view>品牌:</view>
      </picker>
    </view>
    <view class="product-list">
      <view v-for="(item, index) in filteredProducts" :key="index">
        <!-- 商品卡片展示 -->
        <uni-card :title="item.name" :price="item.price" :img="item.imgUrl" />
      </view>
    </view>
  </view>
</template>

2.2 数据管理与逻辑处理

Vuex状态管理

import { reactive } from 'vue';
import axios from 'axios';

export default {
  data() {
    return reactive({
      searchKeyword: '',
      selectedType: '所有类型',
      priceRange: [0, 500],
      brands: ['Apple', 'Samsung', 'Huawei'],
      products: [], // 后端返回的商品列表
      filteredProducts: []
    });
  },
  methods: {
    fetchProducts() {
      // 模拟从后端获取数据的异步操作
      axios.get('/api/products')
        .then(response => {
          this.products = response.data;
          this.filteredProducts = this.products; // 初始状态下显示所有产品
        })
        .catch(error => console.error(error));
    },
    
    onTypeChange(e) {
      this.selectedType = e.detail.value;
      // 根据类型筛选商品
      this.filteredProducts = this.products.filter(item => item.category === this.selectedType);
    },
    
    onPriceRangeChange(e) {
      const [min, max] = e.detail.value;
      this.filteredProducts = this.products.filter(item => item.price >= min && item.price <= max);
    },
    
    onBrandChange(e) {
      const brand = e.detail.value;
      // 进一步筛选品牌
      this.filteredProducts = this.products.filter(item => item.brand === brand);
    }
  },
  mounted() {
    this.fetchProducts();
  }
}

2.3 用户交互与优化

• 实时搜索：在输入框中添加实时搜索功能，动态更新筛选条件下的商品列表。
• 性能优化：使用懒加载或分页加载技术减少初始加载时间，提高用户体验。
• 响应式设计：确保页面在不同设备上都能良好展示，提供一致的使用体验。

3. 结语

通过上述步骤，我们构建了一个基本的具有搜索和筛选功能的商品列表页面。uni-app框架的灵活性使得这一过程既高效又便捷。实际应用中，你可能需要进一步完善界面设计、增加更多交互细节，并对后端接口进行更深入的集成与优化。希望这篇文章能为你在uni-app项目中实现类似功能提供有价值的参考。