uni-app怎么在uni-list组件中使用过滤器-uni-app-PHP中文网

uni-list 本身不支持内置过滤器，需通过 computed 或 methods 预处理数据后再渲染；直接在 v-for 中使用管道符会报错，因 vue 3 已移除该语法；应避免在模板中实时过滤，而应在响应式依赖下用 computed 实现搜索与分类双条件过滤，并配合节流、分页及服务端过滤以保障性能。

uni-app怎么在uni-list组件中使用过滤器

uni-list 本身不支持内置过滤器，得靠 computed 或 methods 处理数据

uni-list 只是渲染容器，它不提供筛选逻辑。所谓“在 uni-list 中用过滤器”，实际是指：先对 rawList 做过滤，再把结果传给 uni-list-item 渲染。直接在模板里对 uni-list 加 | filterName 是无效的——它不是 Vue 的普通组件，不能被管道符处理。

常见错误是写成这样：
<uni-list><uni-list-item v-for="item in list | myFilter" :key="item.id"></uni-list-item></uni-list>
这会报错或静默失败，因为 v-for 不支持带管道符的表达式（Vue 3 已移除该语法，uni-app 3.x 基于 Vue 3）。

正确做法是把过滤逻辑提前到 data 或 computed 中
若用 computed，注意响应式依赖要完整（比如搜索关键词、分类 ID、排序字段都得是响应式变量）
避免在 v-for 内做 filter() 或 sort()，否则每次重绘都执行，大数据量时卡顿明显

用 computed 实现搜索 + 分类双条件过滤

适合中等数据量（

computed: {
  filteredList() {
    let list = this.rawList || []
    // 搜索关键词
    if (this.searchKey) {
      const key = this.searchKey.trim().toLowerCase()
      list = list.filter(item =>
        item.title?.toLowerCase().includes(key) ||
        item.desc?.toLowerCase().includes(key) ||
        item.tag?.toLowerCase().includes(key)
      )
    }
    // 分类筛选（假设后端返回 category 字段）
    if (this.selectedCategory !== '') {
      list = list.filter(item => item.category === this.selectedCategory)
    }
    return list
  }
}