coinisi_li
coinisi_li

Vue3 element-ui实现Pagination分页组件--封装分页

什么是Pagination分页组件？

在 B 端的 web 开发中，分页组件或者叫分页器，是较为常用的控件之一，通常配合表格或列表，实现数据量大的情况下，分页拆解数据的功能。

1.scrollTo和滚动视觉差

HTML DOM里面定义了scrollTo方法，用法：scrollTo(xpos,ypos)，把内容滚动到当前的指定位置。但是这个充其量只能说是移动而不能说是滚动，似乎没有滑动的效果显示出来。好在JQuery提供了足够多方便的插件，其中一个就能够提供平滑滚动的功能

插件叫做jquery.scrollTo.js，当然前提是首先包含jquery的库。而且它自己里面已经封装的很好了，只需要简单的调用作用在标签上的函数就能够实现平滑的滚动，用起来非常的简便。就像下面这样：

 $(function(){   
     $(".nav_pro").click(function(){   
         $.scrollTo('#pro',500);   
     });   
     $(".nav_news").click(function(){   
         $.scrollTo('#news',800);   
     });   
     $(".nav_ser").click(function(){   
         $.scrollTo('#ser',1000);   
     });   
     $(".nav_con").click(function(){   
         $.scrollTo('#con',1200);   
     });   
     $(".nav_job").click(function(){   
         $.scrollTo('#job',1500);   
     });   
 });

scrollTo的两个参数一个定义要滚动的元素对象，另一个是滚动所持续的时间，以毫秒计算。

平滑滚动只是这个插件可以实现的一个最基本的方法，可以考虑在这基础上继续去做其他的应用，比如展示文档，模拟PPT效果等等。

2.vue3使用vue-scrollto

安装vue-scrollto

npm install --save vue-scrollto

然后在main.js引入

const VueScrollTo = require('vue-scrollto');

app.use(VueScrollTo)

最后在对应页面使用即可

v-scroll-to后面为点击需要跳转到页面元素的位置；

'#element'可随意命名，元素的class名或id名

3.vue分页组件--封装：方法一（常用）

为什么封装？

分页功能使用场景较多，故考虑封装为全局组件
自己封装成本较低，需要什么功能就添加什么功能
相对使用现成组件库，自己封装代码体积可控

分页组件采用的element组件里的封装一下即可全局使用，方便快捷

采用的是element组件的扥也组件，需安装element依赖，具体如何安装就不多说了。

一、在utils新建scroll-to.js

Vue3 element-ui实现Pagination分页组件--封装分页_第1张图片

scroll-to.js内容：

Math.easeInOutQuad = function(t, b, c, d) {

    t /= d / 2

    if (t < 1) {

      return c / 2 * t * t + b

    }

    t--

    return -c / 2 * (t * (t - 2) - 1) + b

  }

  // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts

  var requestAnimFrame = (function() {

    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }

  })()

  /**

   * Because it's so fucking difficult to detect the scrolling element, just move them all

   * @param {number} amount

   */

  function move(amount) {

    document.documentElement.scrollTop = amount

    document.body.parentNode.scrollTop = amount

    document.body.scrollTop = amount

  }

  function position() {

    return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop

  }

  /**

   * @param {number} to

   * @param {number} duration

   * @param {Function} callback

   */

  export function scrollTo(to, duration, callback) {

    const start = position()

    const change = to - start

    const increment = 20

    let currentTime = 0

    duration = (typeof (duration) === 'undefined') ? 500 : duration

    var animateScroll = function() {

      // increment the time

      currentTime += increment

      // find the value with the quadratic in-out easing function

      var val = Math.easeInOutQuad(currentTime, start, change, duration)

      // move the document.body

      move(val)

      // do the animation unless its over

      if (currentTime < duration) {

        requestAnimFrame(animateScroll)

      } else {

        if (callback && typeof (callback) === 'function') {

          // the animation is done so lets callback

          callback()

        }

      }

    }

    animateScroll()

  }

二、在components新建Pagination 新建index.vue文件

Vue3 element-ui实现Pagination分页组件--封装分页_第2张图片

index.vue内容：

三、在main.js引入分组组件 ，并且挂在全局

import Pagination from "./components/Pagination";
Vue.component('Pagination', Pagination)

四、需要用到的页面，使用关在全局的方法名即可使用

复制粘贴 即可正常使用样式问题调一下即可，@pagination为获取列表的方法，在改变条数或者页数的时候触达

4.vue分页组件--封装：方法二（了解）

方法二与方法一的区别：方法一是全局引入，方法二是组件部分引入，即在使用的地方引入；

另一个区别在方法二的第5点，在方法一中也是可以用的。

一、分页的原理：

1.1 分页的原理

通过element-ui 的内置组件pagination实现分页，任何分页都有以下五个部分组成：

  • 记录的总条数

  • 每页显示的记录条数

  • 总页数

  • 当前是第几页

  • 当前页的所有记录

1.2 真假分页

pagination实际上是一个组件，组件里设置了分页常用到的参数，让pagination组件得到分页常用的参数值，这就能够实现分页了。

真分页：当你目前在首页的时候，点击“第二页”或“下一页”的时候，会重新向后端发送请求，请求第二页的数据

假分页:一开始从后端发送请求获取所有的数据，前端通过在组件的方式对数据进行分页，再点击分页的按钮的时候，数据其实已经在浏览器缓存的缓存中了，不需要再请求后端接口

二、后端-PageHelper的使用：

1、首先要在pom.xml中添加pageHelper的依赖


        
            com.github.pagehelper
            pagehelper
            5.1.10

2、在映射文件中书写“SQL查询”语句；注意：语句结束不要用“；”

3、书写Controller类，注意：调用PageHelper的startPage方法一定要在调用接口中方法前。

@RequestMapping("/PageInfo")
    public PageInfo pageInfo(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        List list = productsDaoService.QueryProducts();
        PageInfo pageInfo = new PageInfo(list);
        return pageInfo;
    }

4、启动tomcat服务器，使用Apipost对接口进行测试，如果接口没有问题的话，就会在“实时响应”中获取到返回值信息。

Vue3 element-ui实现Pagination分页组件--封装分页_第3张图片

三、前端-Pagination的使用：

（使用pagination之前，需要会element-UI有初步的了解），因为使用pagination就是一个从vue-element-admin上“搬运”代码的过程。具体可以在element集成上搜索“pagination”进行查看

Vue3 element-ui实现Pagination分页组件--封装分页_第4张图片

1、添加