vue实现列表翻页

Vue 列表翻页实现方法

基础分页实现

在 Vue 中实现列表翻页通常需要结合分页组件和数据请求。使用 Element UI 的分页组件可以快速实现：

<template>
  <div>
    <ul>
      <li v-for="item in currentPageData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  computed: {
    currentPageData() {
      return this.listData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    },
    fetchData() {
      // API请求获取数据
      // 设置this.listData和this.total
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

服务器端分页

对于大数据量场景，建议使用服务器端分页：

methods: {
  async fetchData() {
    const params = {
      page: this.currentPage,
      size: this.pageSize
    }
    const res = await api.getList(params)
    this.listData = res.data.list
    this.total = res.data.total
  },
  handleCurrentChange(val) {
    this.currentPage = val
    this.fetchData()
  }
}

无限滚动实现

对于移动端或需要流畅滚动体验的场景，可以使用无限滚动：

<template>
  <div class="infinite-list" v-infinite-scroll="load" infinite-scroll-disabled="busy">
    <div v-for="item in listData" :key="item.id" class="list-item">
      {{ item.name }}
    </div>
    <div v-if="loading" class="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
      page: 1,
      busy: false,
      loading: false,
      hasMore: true
    }
  },
  methods: {
    async load() {
      if (this.busy || !this.hasMore) return

      this.busy = true
      this.loading = true

      const res = await api.getList({ page: this.page })
      this.listData = [...this.listData, ...res.data.list]
      this.hasMore = res.data.hasMore
      this.page++

      this.busy = false
      this.loading = false
    }
  }
}
</script>

性能优化技巧

对于大型列表，使用虚拟滚动可以提高性能：

<template>
  <RecycleScroller
    class="scroller"
    :items="listData"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="item">
      {{ item.name }}
    </div>
  </RecycleScroller>
  <button @click="loadMore">加载更多</button>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: { RecycleScroller },
  data() {
    return {
      listData: []
    }
  },
  methods: {
    loadMore() {
      // 加载更多数据
    }
  }
}
</script>

实现列表翻页时需要考虑数据量大小、用户体验和性能要求，选择合适的分页方式。服务器端分页适合大数据量，客户端分页适合小数据量，无限滚动适合移动端，虚拟滚动适合超长列表。