vue实现web滚动条分页

本文实例为大家分享了vue web滚动条分页的具体代码，供大家参考，具体内容如下

1.在你的帮助类里面新建一个slidePagination.js文件

2.将下面的代码复制进去

import Vue from 'vue'

// 聚焦指令
// 注册一个全局自定义指令 `v-focus`
// v-focus
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  }
})

//表格下拉加载数据监听
Vue.directive('loadmore', { //懒加载 ========>该方法为el-table下拉数据监听事件
  bind (el, binding) {
    const selectWrap = el.querySelector('.el-table__body-wrapper')
    selectWrap.addEventListener('scroll', function () {
      let sign = 100
      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
      if (scrollDistance <= sign) {
        binding.value()
      }
    })
  }
})

//以下是其他帮助类
// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {
  bind (el, binding, vnode, oldVnode) {
    const dragDom = binding.value.$el.querySelector('.el-dialog');

    el.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - el.offsetLeft;

      document.onmousemove = function (e) {
        e.preventDefault(); // 移动时禁用默认事件

        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX;
        dragDom.style.width = `${l}px`;
      }

      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      }
    }
  }
})

//弹出框可拖拽
//v-dialogDrag
Vue.directive('dialogDrag', {
  bind (el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header');
    const dragDom = el.querySelector('.el-dialog');
    dialogHeaderEl.style.cursor = 'move';

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      let oevent = e || window.event;
      const disX = oevent.clientX - dialogHeaderEl.offsetLeft;
      const disY = oevent.clientY - dialogHeaderEl.offsetTop;

      // 获取到的值带px 正则匹配替换
      let styL = 0, styT = 0;

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
      } else {
        styL = sty.left != 'auto'  (+sty.left.replace(/\px/g, '')) : (dialogHeaderEl.offsetLeft);
        styT = sty.top != 'auto'  (+sty.top.replace(/\px/g, '')) : (dialogHeaderEl.offsetTop);
      }

      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        let oevent = e || window.event;
        const l = oevent.clientX - disX;
        const t = oevent.clientY - disY;

        // 移动当前元素
        dragDom.style.left = `${l + styL}px`;
        dragDom.style.top = `${t + styT}px`;

        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }

      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      }
    }
  }
})

3.将此文件在main.js中引用

import "./utils/slidePagination"; //双引号中的内容为你文件所在位置

4.具体引用，页面

<template>
<el-table stripe
        :data="prescriptionRecordsList" //数据源
        v-loadmore="loadMore" //这个注册的监听方法，
        v-loading="loadingBox"//加载控制
        height="700px"//高度，注意：高度如果不给。可能不会出现滚动条，没有滚动条，滚动分页就不存在
        border>
  .......//省略table的列
 </el-table>
</template>

data () {
  return {
  //分页属性，根据自己后台需求定
   modulePage: {
    page: {
     currentPage: 1,//当前页
     pageSize: 50,//每页显示的数量
     total: 0,//数据总数
    }
   },
   //数据源
   list: [],
   //el-table加载动画控制
   loadingBox: false,
   //调用方法控制
   loadSign: false,
  };
 },
 methods: {
  init () {
   let that = this;
   this.modulePage.page.currentPage = 1;//如果出现多次加载情况，调用此方法是需要重置当前页为1
   this.prescriptionRecordsList =[]; //重置
   this.post("请求地址", this.modulePage).then(res => {//this.post()为自己分装的请求方法
    if (res.data.errorCode != "00") {
     this.$message.warning(res.data.errorMsg);
     return;
    }
    this.prescriptionRecordsList = res.data.sprbody.list; //返回的数据源
    that.modulePage.page.total = res.data.sprbody.total; //返回的数据总数
    that.loadSign = true; //增加控制
   })
  },
  loadMore () {
   let that = this;
   if (this.loadSign) { //当其为true 的时候进入方法
    //判断数据是否加载完毕，完毕就返回不在继续请求后台加载数据
    if (this.modulePage.page.currentPage > this.modulePage.page.total / this.modulePage.page.pageSize) {
     return;
    }
    //进入加载数据时，将控制字段更新，避免多次触发调用
    this.loadSign = false;
    this.loadingBox = true;//loading弹窗，过度动画
    this.modulePage.page.currentPage++; //增加当前页数
    setTimeout(() => {
     /**
     * 回调加载数据区
     */
     that.loadPageValue();
    }, 500)
   } else {
    return;
   }
  },
  //回调加载数据区
  loadPageValue () {
   let that = this;
   this.post("请求地址", this.modulePage).then(res => {
    if (res.data.errorCode != "00") {
     this.$message.warning(res.data.errorMsg);
     return;
    }
    //将分页查询的数据拼接到初始化查询的数据上
    this.prescriptionRecordsList = this.prescriptionRecordsList.concat(res.data.sprbody);
    that.modulePage.page.total = res.data.sprbody.total; //我这边多次同一方法，继续返回了总数，防止数据发生变化。
    that.loadSign = true; //加载完之后，重置控制变为可继续加载状态
    that.loadingBox = false;//关掉过度动画
   })
  }
},
 created () {
  this.init();//初始化加载数据
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。