当前位置：首页 > uni-app

uniapp 内容列表

2026-01-15 18:17:39uni-app

uniapp 内容列表的实现方法

在uniapp中实现内容列表通常需要结合组件和数据绑定。以下是一个常见的方法：

模板部分

<template>
  <view class="content">
    <scroll-view scroll-y="true" class="list">
      <view v-for="(item, index) in listData" :key="index" class="list-item">
        <text>{{ item.title }}</text>
        <image :src="item.image" mode="aspectFill"></image>
      </view>
    </scroll-view>
  </view>
</template>

脚本部分

uniapp 内容列表

<script>
export default {
  data() {
    return {
      listData: [
        { title: '项目1', image: '/static/image1.jpg' },
        { title: '项目2', image: '/static/image2.jpg' }
      ]
    }
  }
}
</script>

样式部分

<style>
.content {
  padding: 20rpx;
}
.list {
  height: 100vh;
}
.list-item {
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
</style>

分页加载的实现

对于长列表，实现分页加载可以提升性能：

uniapp 内容列表

data() {
  return {
    listData: [],
    page: 1,
    loading: false,
    noMore: false
  }
},
methods: {
  loadData() {
    if (this.loading || this.noMore) return

    this.loading = true
    uni.request({
      url: 'your_api_url',
      data: { page: this.page },
      success: (res) => {
        if (res.data.length) {
          this.listData = [...this.listData, ...res.data]
          this.page++
        } else {
          this.noMore = true
        }
      },
      complete: () => {
        this.loading = false
      }
    })
  }
},
onReachBottom() {
  this.loadData()
},
onLoad() {
  this.loadData()
}

性能优化技巧

使用<recycle-list>组件处理超长列表：

<recycle-list 
  :list="listData"
  :template-key="'templateKey'"
  :alias="'item'">
  <template v-slot:default="props">
    <view>{{ props.item.title }}</view>
  </template>
</recycle-list>

添加下拉刷新功能：

onPullDownRefresh() {
  this.page = 1
  this.noMore = false
  this.listData = []
  this.loadData()
  uni.stopPullDownRefresh()
}

常见UI库实现

使用uView UI库快速创建列表：

<template>
  <u-list>
    <u-list-item 
      v-for="(item, index) in listData"
      :key="index"
      :title="item.title"
      :thumb="item.image">
    </u-list-item>
  </u-list>
</template>