当前位置：首页 > uni-app

uniapp搜索筛选

2026-03-05 00:31:13uni-app

实现搜索筛选功能

在UniApp中实现搜索筛选功能通常涉及前端界面设计和后端数据处理。以下是几种常见的方法：

使用<input>和v-model绑定搜索关键词

uniapp搜索筛选

<template>
  <view>
    <input v-model="searchText" placeholder="输入关键词搜索" @input="filterData" />
    <view v-for="(item, index) in filteredList" :key="index">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      originalList: [],
      filteredList: []
    }
  },
  methods: {
    filterData() {
      this.filteredList = this.originalList.filter(item => 
        item.name.includes(this.searchText)
      )
    }
  }
}
</script>

结合下拉筛选组件

<template>
  <view>
    <picker @change="bindPickerChange" :value="index" :range="filterOptions">
      <view>当前筛选：{{filterOptions[index]}}</view>
    </picker>
    <view v-for="(item, i) in filteredData" :key="i">
      {{item.name}}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      filterOptions: ['全部', '类型1', '类型2'],
      index: 0,
      originalData: [],
      filteredData: []
    }
  },
  methods: {
    bindPickerChange(e) {
      this.index = e.detail.value
      this.applyFilter()
    },
    applyFilter() {
      if(this.index === 0) {
        this.filteredData = [...this.originalData]
      } else {
        this.filteredData = this.originalData.filter(item => 
          item.type === this.filterOptions[this.index]
        )
      }
    }
  }
}
</script>

优化搜索性能

对于大数据量列表，建议采用防抖技术减少频繁触发搜索：

uniapp搜索筛选

let timer = null
methods: {
  filterData() {
    clearTimeout(timer)
    timer = setTimeout(() => {
      // 实际过滤逻辑
    }, 300)
  }
}

多条件组合筛选

实现多个筛选条件的组合查询：

filterData() {
  this.filteredList = this.originalList.filter(item => {
    const nameMatch = item.name.includes(this.searchText)
    const typeMatch = this.selectedType === '全部' || item.type === this.selectedType
    const priceMatch = item.price >= this.minPrice && item.price <= this.maxPrice
    return nameMatch && typeMatch && priceMatch
  })
}

与后端API结合

当数据量较大时，建议将筛选逻辑放在后端：

async fetchFilteredData() {
  const res = await uni.request({
    url: '/api/filter',
    data: {
      keyword: this.searchText,
      category: this.selectedCategory,
      page: this.currentPage
    }
  })
  this.filteredList = res.data.list
}