当前位置：首页 > uni-app

uniapp切片

2026-01-13 19:20:24uni-app

uniapp 切片实现方法

在 uniapp 中实现切片功能通常指的是对图片或数据进行分割处理。以下是几种常见的切片实现方式：

图片切片展示

通过 CSS 和 JavaScript 实现图片的网格化切片展示：

<template>
  <view class="slice-container">
    <view v-for="(item, index) in slices" :key="index" class="slice-item" 
          :style="{backgroundImage: `url(${imageUrl})`, backgroundPosition: item.position}">
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '/static/sample.jpg',
      sliceCount: 9, // 3x3网格
      slices: []
    }
  },
  mounted() {
    this.generateSlices()
  },
  methods: {
    generateSlices() {
      const rows = Math.sqrt(this.sliceCount)
      const sliceWidth = 100/rows

      for(let i=0; i<rows; i++) {
        for(let j=0; j<rows; j++) {
          this.slices.push({
            position: `${-j*sliceWidth}% ${-i*sliceWidth}%`
          })
        }
      }
    }
  }
}
</script>

<style>
.slice-container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 300px;
}

.slice-item {
  width: 33.33%;
  height: 33.33%;
  background-size: 300% 300%;
  border: 1px solid #fff;
}
</style>

数据分片加载

实现列表数据的分片加载，优化长列表性能：

export default {
  data() {
    return {
      fullData: [], // 完整数据集
      displayData: [], // 显示的数据片
      currentPage: 0,
      pageSize: 10
    }
  },
  onLoad() {
    this.loadFullData()
  },
  onReachBottom() {
    this.loadMoreData()
  },
  methods: {
    loadFullData() {
      // 模拟获取完整数据
      this.fullData = Array.from({length: 100}, (_,i) => ({id: i, name: `Item ${i}`}))
      this.loadSlice()
    },
    loadSlice() {
      const start = this.currentPage * this.pageSize
      const end = start + this.pageSize
      this.displayData = this.displayData.concat(this.fullData.slice(start, end))
      this.currentPage++
    }
  }
}

大文件分片上传

实现大文件的分片上传功能：

async function uploadFile(file) {
  const CHUNK_SIZE = 1024 * 1024 // 1MB每片
  const totalChunks = Math.ceil(file.size / CHUNK_SIZE)

  for(let i=0; i<totalChunks; i++) {
    const start = i * CHUNK_SIZE
    const end = Math.min(start + CHUNK_SIZE, file.size)
    const chunk = file.slice(start, end)

    const formData = new FormData()
    formData.append('file', chunk)
    formData.append('chunkIndex', i)
    formData.append('totalChunks', totalChunks)
    formData.append('fileName', file.name)

    await uni.uploadFile({
      url: 'https://your-api.com/upload',
      filePath: chunk,
      name: 'file',
      formData: formData
    })
  }
}