实现分页加载，加载更多(按钮类型），滚动加载的方式

Posted 2020-12-20 hudunyu

基于vue语法

分页加载（vue+element -ui）

<template>
  <div>
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :pageSize="pageSize"
      :total="total"
      @current-change="handleChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import { Pagination, Button } from "element-ui"; //局部引入分页组件
export default {
  name: "demo",
  components: {
    [Pagination.name]: Pagination,
  },
  data() {
    return {
      pageSize: 3,
      pageNum: 1,
      total: 0,
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      this.axios
        .get("/orders", {
          params: {
            pageSize: this.pageSize,
            pageNum: this.pageNum,
          },
        })
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //分页器分页
    handleChange(pageNum) {
      this.pageNum = pageNum;
      this.getOrderList();
    },
  },
};
</script>

<style></style>

　　

加载更多

　　点击按钮加载更多，始终一屏显示，加载数据拼接在原数据后面！

<template>
  <div>
    <el-button type="primary" :loading="loading" @click="loadMore"
      >加载更多</el-button
    >
  </div>
</template>
<script>
import { Button } from "element-ui"; //局部引入分页组件
export default {
  name: "demo",
  components: {
    [Button.name]: Button,
  },
  data() {
    return {
      pageSize: 3,
      pageNum: 1,
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      this.axios
        .get("/orders", {
          params: {
            pageSize: this.pageSize,
            pageNum: this.pageNum,
          },
        })
        .then((res) => {
          this.list = this.list.concat(res.list);//拼接原数据
          this.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    loadMore() {
      this.getOrderList();
    },
  },
};
</script>
<style></style>

　　

滚动加载数据

1.使用插件   vue-infinite-scroll

2.使用插件better-scroll

 

   可查看相关文档哈