uniapp切片

uniapp 切片实现方法

在 uniapp 中实现切片功能通常指将长列表数据进行分页加载或分段渲染，以优化性能。以下是几种常见实现方式：

分页加载数据

通过接口分页请求数据，每次加载指定数量的数据项：

data() {
  return {
    list: [],
    page: 1,
    pageSize: 10,
    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, size: this.pageSize },
      success: (res) => {
        if (res.data.length < this.pageSize) {
          this.noMore = true
        }
        this.list = [...this.list, ...res.data]
        this.page++
      },
      complete: () => {
        this.loading = false
      }
    })
  }
}

虚拟列表渲染

对于超长列表，使用 uni-app 的 <scroll-view> 配合动态渲染：

<scroll-view 
  scroll-y 
  @scrolltolower="loadMore"
  style="height: 100vh">
  <view v-for="(item, index) in visibleData" :key="index">
    {{ item.content }}
  </view>
  <view v-if="loading">加载中...</view>
</scroll-view>

手动分段加载

通过计算可视区域动态加载数据：

data() {
  return {
    fullList: [], // 完整数据
    visibleStart: 0,
    visibleEnd: 20,
    chunkSize: 20
  }
},
computed: {
  visibleData() {
    return this.fullList.slice(this.visibleStart, this.visibleEnd)
  }
},
methods: {
  handleScroll(e) {
    const scrollTop = e.detail.scrollTop
    const scrollHeight = e.detail.scrollHeight
    const viewHeight = e.detail.viewHeight

    if (scrollTop + viewHeight > scrollHeight - 100) {
      this.visibleEnd += this.chunkSize
    }
  }
}

使用第三方组件

可集成成熟的虚拟列表组件如 mescroll-uni：

1. 安装依赖：npm install mescroll-uni
2. 在页面中使用：

   <mescroll-uni ref="mescroll" @init="mescrollInit" @up="upCallback" :up="{textNoMore:'没有更多数据'}">
   <view v-for="(item, index) in list" :key="index">
    {{ item.title }}
   </view>
   </mescroll-uni>

性能优化建议

• 给列表项设置固定的高度
• 使用 :key 提高 diff 效率
• 避免在列表项中使用复杂的计算属性
• 图片使用懒加载模式
• 大数据量考虑使用 Web Worker 处理