vue怎么实现web滚动条分页(vue,web,开发技术)

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

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

importVuefrom'vue'//聚焦指令//注册一个全局自定义指令`v-focus`//v-focusVue.directive('focus',{//当被绑定的元素插入到DOM中时……inserted:function(el){//聚焦元素el.focus();}})//表格下拉加载数据监听Vue.directive('loadmore',{//懒加载========>该方法为el-table下拉数据监听事件bind(el,binding){constselectWrap=el.querySelector('.el-table__body-wrapper')selectWrap.addEventListener('scroll',function(){letsign=100constscrollDistance=this.scrollHeight-this.scrollTop-this.clientHeightif(scrollDistance<=sign){binding.value()}})}})//以下是其他帮助类//v-dialogDragWidth:弹窗宽度拖大拖小Vue.directive('dialogDragWidth',{bind(el,binding,vnode,oldVnode){constdragDom=binding.value.$el.querySelector('.el-dialog');el.onmousedown=(e)=>{//鼠标按下，计算当前元素距离可视区的距离constdisX=e.clientX-el.offsetLeft;document.onmousemove=function(e){e.preventDefault();//移动时禁用默认事件//通过事件委托，计算移动的距离constl=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){constdialogHeaderEl=el.querySelector('.el-dialog__header');constdragDom=el.querySelector('.el-dialog');dialogHeaderEl.style.cursor='move';//获取原有属性iedom元素.currentStyle火狐谷歌window.getComputedStyle(dom元素,null);conststy=dragDom.currentStyle||window.getComputedStyle(dragDom,null);dialogHeaderEl.onmousedown=(e)=>{//鼠标按下，计算当前元素距离可视区的距离letoevent=e||window.event;constdisX=oevent.clientX-dialogHeaderEl.offsetLeft;constdisY=oevent.clientY-dialogHeaderEl.offsetTop;//获取到的值带px正则匹配替换letstyL=0,styT=0;//注意在ie中第一次获取到的值为组件自带50%移动之后赋值为pxif(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){//通过事件委托，计算移动的距离letoevent=e||window.event;constl=oevent.clientX-disX;constt=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-tablestripe: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(){letthat=this;this.modulePage.page.currentPage=1;//如果出现多次加载情况，调用此方法是需要重置当前页为1this.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(){letthat=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(){letthat=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();//初始化加载数据}