uni-app 列表下拉筛选功能实现 类似美团

在实现类似美团的下拉筛选功能时，可以使用 uni-app 提供的组件和事件来完成。以下是一个简化的代码示例，展示如何在 uni-app 中实现列表下拉筛选功能。

1. 数据准备

首先，假设我们有一个商品列表数据，以及筛选条件的数据结构：

// pages/index/index.vue
<script>
export default {
  data() {
    return {
      goodsList: [
        // 商品数据
      ],
      filters: {
        category: '', // 分类
        priceRange: '' // 价格范围
      },
      filteredGoodsList: []
    };
  },
  onLoad() {
    this.goodsList = [
      // 初始化商品数据
    ];
    this.applyFilters();
  },
  methods: {
    applyFilters() {
      let list = [...this.goodsList];
      
      if (this.filters.category) {
        list = list.filter(item => item.category === this.filters.category);
      }
      
      if (this.filters.priceRange) {
        const [min, max] = this.filters.priceRange.split('-').map(Number);
        list = list.filter(item => item.price >= min && item.price <= max);
      }
      
      this.filteredGoodsList = list;
    }
  }
};
</script>

2. 下拉筛选组件

接下来，我们创建一个简单的下拉筛选组件：

<!-- pages/index/index.vue -->
<template>
  <view>
    <picker mode="selector" :range="categories" @change="onCategoryChange">
      <view class="picker">{{ filters.category }}</view>
    </picker>
    <picker mode="multiSelector" :range="[priceRanges]" @change="onPriceRangeChange">
      <view class="picker">{{ filters.priceRange ? filters.priceRange : '价格范围' }}</view>
    </picker>
    <scroll-view>
      <view v-for="item in filteredGoodsList" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
// 在 data 中添加 categories 和 priceRanges 数据
data() {
  return {
    categories: ['全部', '分类1', '分类2'],
    priceRanges: [['0-50', '0-50元'], ['50-100', '50-100元']],
    // ... 其他数据
  };
},
methods: {
  onCategoryChange(e) {
    this.filters.category = this.categories[e.detail.value];
    this.applyFilters();
  },
  onPriceRangeChange(e) {
    this.filters.priceRange = this.priceRanges[0][e.detail.value].split('-')[0];
    this.applyFilters();
  }
}
</script>

3. 样式调整

最后，可以根据需要调整样式，使筛选组件和商品列表看起来更美观。

/* pages/index/index.vue */
<style>
.picker {
  padding: 10px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}
</style>

以上代码展示了一个基本的实现思路，包括数据准备、下拉筛选组件的创建以及筛选逻辑的应用。你可以根据实际需求进一步扩展和优化。