uniapp数据加载

数据加载的基本方法

在UniApp中实现数据加载通常涉及从API、本地存储或其他数据源获取数据并渲染到页面。常见方法包括使用onLoad生命周期钩子、uni.request发起网络请求以及结合v-for指令渲染列表数据。

// 示例：在页面加载时请求数据
export default {
  data() {
    return {
      listData: []
    }
  },
  onLoad() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      uni.request({
        url: 'https://api.example.com/data',
        success: (res) => {
          this.listData = res.data
        }
      })
    }
  }
}

分页加载实现

处理长列表时需实现分页加载以避免一次性请求过多数据。通过监听页面滚动到底部事件触发加载更多数据。

// 示例：分页加载逻辑
export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      listData: [],
      loading: false
    }
  },
  onReachBottom() {
    if (!this.loading && this.listData.length < this.total) {
      this.page++
      this.fetchData()
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      uni.request({
        url: 'https://api.example.com/data',
        data: { page: this.page, size: this.pageSize },
        success: (res) => {
          this.listData = [...this.listData, ...res.data.list]
          this.total = res.data.total
        },
        complete: () => {
          this.loading = false
        }
      })
    }
  }
}

数据缓存策略

为提升用户体验可对数据进行本地缓存，减少重复请求。使用uni.setStorage和uni.getStorage实现简单缓存。

// 示例：带缓存的数据加载
export default {
  methods: {
    fetchData() {
      const cacheKey = 'data_cache'
      const cachedData = uni.getStorageSync(cacheKey)

      if (cachedData && !this.forceRefresh) {
        this.listData = cachedData
        return
      }

      uni.request({
        url: 'https://api.example.com/data',
        success: (res) => {
          this.listData = res.data
          uni.setStorageSync(cacheKey, res.data)
        }
      })
    }
  }
}

加载状态反馈

提供加载中和加载失败的视觉反馈对用户体验至关重要。可通过变量控制不同状态的UI展示。

<template>
  <view>
    <view v-if="loading">加载中...</view>
    <view v-else-if="error">加载失败，点击重试</view>
    <view v-else v-for="item in listData" :key="item.id">
      {{ item.name }}
    </view>
  </view>
</template>

性能优化技巧

对于大数据量列表，建议使用虚拟列表技术或分片渲染。UniApp的<scroll-view>组件配合v-for可实现基本的长列表渲染优化。

<scroll-view scroll-y style="height: 100vh">
  <view v-for="item in listData" :key="item.id">
    {{ item.name }}
  </view>
  <view v-if="loadingMore">正在加载更多...</view>
</scroll-view>