当前位置：首页 > uni-app

uniapp 列表数据

2026-03-05 08:45:17uni-app

列表数据渲染

在uniapp中渲染列表数据通常使用v-for指令结合数组。通过循环遍历数组，动态生成列表项。

<template>
  <view>
    <view v-for="(item, index) in listData" :key="index">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        { name: '项目1' },
        { name: '项目2' },
        { name: '项目3' }
      ]
    }
  }
}
</script>

列表性能优化

长列表场景下建议使用uni-list组件或实现虚拟滚动。避免同时渲染大量DOM节点。

<uni-list>
  <uni-list-item 
    v-for="(item, index) in largeList"
    :key="item.id"
    :title="item.title"
  />
</uni-list>

下拉刷新与上拉加载

通过scroll-view或页面滚动事件实现分页加载功能。

<template>
  <view>
    <scroll-view 
      scroll-y 
      @scrolltolower="loadMore"
      @refresherrefresh="onRefresh"
      :refresher-enabled="true"
    >
      <!-- 列表内容 -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  methods: {
    loadMore() {
      // 上拉加载逻辑
    },
    onRefresh() {
      // 下拉刷新逻辑
    }
  }
}
</script>

列表动画效果

使用CSS过渡或uniapp的动画API为列表项添加交互动画。

.list-item {
  transition: all 0.3s;
}
.list-item:active {
  transform: scale(0.98);
}

列表数据过滤

通过计算属性实现列表数据的搜索过滤功能。

<template>
  <input v-model="searchText" placeholder="搜索"/>
  <view v-for="item in filteredList" :key="item.id">
    {{ item.name }}
  </view>
</template>

<script>
export default {
  computed: {
    filteredList() {
      return this.listData.filter(item => 
        item.name.includes(this.searchText)
      )
    }
  }
}
</script>

跨平台适配

针对不同平台调整列表样式，使用条件编译处理平台差异。

<!-- #ifdef H5 -->
<view class="h5-list-style">
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="wx-list-style">
<!-- #endif -->

列表状态管理

复杂列表建议使用Vuex或Pinia管理状态，保持数据同步。

uniapp 列表数据

// store.js
export default new Vuex.Store({
  state: {
    listData: []
  },
  mutations: {
    updateList(state, payload) {
      state.listData = payload
    }
  }
})