vue怎么实现web滚动条分页

这篇“vue怎么实现web滚动条分页”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue怎么实现web滚动条分页”文章吧。

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

将下面的代码复制进去

import Vue from 'vue'// 聚焦指令// 注册一个全局自定义指令 `v-focus`// v-focusVue.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-dialogDragVue.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;            }        }    }})

将此文件在main.js中引用

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

具体引用，页面

<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();//初始化加载数据  }

以上就是关于“vue怎么实现web滚动条分页”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。