当前位置：首页 > uni-app

uniapp搜索筛选

2026-02-05 22:50:15uni-app

uniapp 搜索筛选实现方法

基础搜索功能实现

在pages目录下创建搜索页面，使用<uni-search-bar>组件实现输入框

<template>
  <view>
    <uni-search-bar @confirm="handleSearch" v-model="keyword"></uni-search-bar>
    <view v-for="item in filteredList" :key="item.id">
      {{ item.name }}
    </view>
  </view>
</template>

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

多条件筛选实现

添加多个筛选条件时，可以使用对象存储筛选参数

uniapp搜索筛选

<template>
  <view>
    <uni-search-bar v-model="filterParams.keyword"></uni-search-bar>
    <picker @change="handleCategoryChange" :range="categories">
      <view>当前选择：{{categories[filterParams.category]}}</view>
    </picker>
    <button @click="applyFilters">筛选</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      filterParams: {
        keyword: '',
        category: 0,
        priceRange: [0, 100]
      },
      categories: ['全部', '电子产品', '服装']
    }
  },
  methods: {
    applyFilters() {
      this.filteredList = this.originalList.filter(item => {
        const matchKeyword = item.name.includes(this.filterParams.keyword)
        const matchCategory = this.filterParams.category === 0 || 
                            item.category === this.filterParams.category
        return matchKeyword && matchCategory
      })
    }
  }
}
</script>

本地存储优化

对于频繁使用的筛选条件，可以使用uni-app的存储API保存用户偏好

uniapp搜索筛选

// 保存筛选条件
uni.setStorageSync('lastFilter', this.filterParams)

// 读取上次筛选条件
const lastFilter = uni.getStorageSync('lastFilter') || {}
this.filterParams = {...this.filterParams, ...lastFilter}

性能优化建议

大数据量时考虑分页加载和防抖处理

let timer = null
watch: {
  keyword(newVal) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      this.handleSearch()
    }, 500)
  }
}

后端接口整合

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

async fetchFilteredData() {
  const res = await uni.request({
    url: '/api/products',
    data: this.filterParams
  })
  this.filteredList = res.data
}

以上方法可根据实际需求组合使用，构建完整的搜索筛选功能。注意根据项目实际情况调整数据结构和方法实现。

标签: uniapp