vue实现web滚动条分页代码示例
时间:2022-06-29 01:50:13 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下vue实现web滚动条分页代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
1.在你的帮助类里面新建一个slidePagination.js文件
2.将下面的代码复制进去
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 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中引用
1 | import "./utils/slidePagination" ; //双引号中的内容为你文件所在位置 |
4.具体引用,页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <template> <el-table stripe= "" :data= "prescriptionRecordsList" 数据源= "" v-loadmore= "loadMore" 这个注册的监听方法,= "" v-loading= "loadingBox" 加载控制= "" 高度,注意:高度如果不给。可能不会出现滚动条,没有滚动条,滚动分页就不存在= "" 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(); //初始化加载数据 } |
相关文章
- 《弓箭传说2》新手玩法介绍 01-16
- 《地下城与勇士:起源》断桥烟雨多买多送活动内容一览 01-16
- 《差不多高手》醉拳龙技能特点分享 01-16
- 《鬼谷八荒》毕方尾羽解除限制道具推荐 01-16
- 《地下城与勇士:起源》阿拉德首次迎新春活动内容一览 01-16
- 《差不多高手》情圣技能特点分享 01-16