当前位置：首页 > uni-app

uniapp 列表数据

2026-02-06 06:58:35uni-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: [
        { id: 1, name: '项目A' },
        { id: 2, name: '项目B' }
      ]
    }
  }
}
</script>

复杂列表布局

对于需要复杂布局的列表，可结合CSS和组件实现。例如实现带图片和描述的卡片列表：

uniapp 列表数据

<view v-for="item in listData" :key="item.id" class="card">
  <image :src="item.image" mode="aspectFill"></image>
  <view class="content">
    <text class="title">{{ item.title }}</text>
    <text class="desc">{{ item.description }}</text>
  </view>
</view>

<style>
.card {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}
.card image {
  width: 120rpx;
  height: 120rpx;
}
.content {
  margin-left: 20rpx;
}
.title {
  font-size: 32rpx;
  color: #333;
}
.desc {
  font-size: 24rpx;
  color: #999;
}
</style>

高性能长列表处理

当处理大量数据时，建议使用<scroll-view>或<list>组件实现懒加载：

<scroll-view 
  scroll-y 
  @scrolltolower="loadMore"
  style="height: 100vh">
  <view v-for="item in longList" :key="item.id">
    <!-- 列表项内容 -->
  </view>
  <view v-if="loading">加载中...</view>
</scroll-view>

<script>
export default {
  data() {
    return {
      longList: [],
      page: 1,
      loading: false
    }
  },
  methods: {
    loadMore() {
      if(this.loading) return;
      this.loading = true;
      // 模拟API请求
      setTimeout(() => {
        const newData = /* 获取新数据 */;
        this.longList = [...this.longList, ...newData];
        this.page++;
        this.loading = false;
      }, 500);
    }
  }
}
</script>

列表数据操作

实现常见的列表操作如删除、排序等：

uniapp 列表数据

// 删除项目
deleteItem(index) {
  this.listData.splice(index, 1);
}

// 排序
sortList() {
  this.listData.sort((a, b) => a.id - b.id);
}

// 过滤
filterList(keyword) {
  return this.listData.filter(item => 
    item.name.includes(keyword)
  );
}

跨平台注意事项

不同平台对列表渲染的优化策略不同：

H5平台可使用虚拟滚动插件
小程序平台注意setData的性能优化
App平台可使用原生列表组件提升性能

状态管理集成

当列表数据需要全局管理时，可结合Vuex：

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

// 组件中使用
computed: {
  listData() {
    return this.$store.state.globalList
  }
}