当前位置：首页 > VUE

vue mui实现分页

2026-01-19 13:07:33VUE

vue mui实现分页的方法

在Vue项目中结合MUI框架实现分页功能，可以通过以下步骤完成。假设使用的是MUI的官方组件或类似UI库（如Mint UI），以下是具体实现方式：

安装MUI或相关UI库

确保项目中已安装MUI或兼容的Vue移动端UI库（如Mint UI）。通过npm或yarn安装：

npm install mint-ui --save

在main.js中全局引入：

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);

分页组件实现

使用Mint UI的mt-loadmore组件实现上拉加载更多（分页逻辑需手动处理）：

<template>
  <div>
    <mt-loadmore 
      :top-method="loadTop" 
      :bottom-method="loadBottom" 
      :bottom-all-loaded="allLoaded"
      ref="loadmore"
    >
      <ul>
        <li v-for="item in list" :key="item.id">{{ item.content }}</li>
      </ul>
    </mt-loadmore>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      allLoaded: false
    };
  },
  methods: {
    loadTop() {
      // 下拉刷新逻辑
      this.page = 1;
      this.fetchData().then(() => {
        this.$refs.loadmore.onTopLoaded();
      });
    },
    loadBottom() {
      // 上拉加载逻辑
      this.page++;
      this.fetchData().then(() => {
        this.$refs.loadmore.onBottomLoaded();
      });
    },
    fetchData() {
      return new Promise((resolve) => {
        // 模拟API请求
        setTimeout(() => {
          const newData = Array(10).fill().map((_, i) => ({
            id: this.page * 10 + i,
            content: `Item ${this.page * 10 + i}`
          }));
          if (this.page === 1) {
            this.list = newData;
          } else {
            this.list = [...this.list, ...newData];
          }
          // 假设数据总共30条
          if (this.page >= 3) {
            this.allLoaded = true;
          }
          resolve();
        }, 1000);
      });
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

自定义分页器

若需传统页码分页，可手动实现分页器组件：

<template>
  <div>
    <ul>
      <li v-for="item in currentPageData" :key="item.id">{{ item.content }}</li>
    </ul>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: Array(30).fill().map((_, i) => ({ id: i, content: `Item ${i}` })),
      currentPage: 1,
      pageSize: 10
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.list.length / this.pageSize);
    },
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.list.slice(start, end);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    }
  }
};
</script>

<style>
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>