经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue实现web滚动条分页
来源:jb51  时间:2022/4/11 16:15:49  对本文有异议

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

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

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

  1. import Vue from 'vue'
  2.  
  3. // 聚焦指令
  4. // 注册一个全局自定义指令 `v-focus`
  5. // v-focus
  6. Vue.directive('focus', {
  7. ? ? // 当被绑定的元素插入到 DOM 中时……
  8. ? ? inserted: function (el) {
  9. ? ? ? ? // 聚焦元素
  10. ? ? ? ? el.focus();
  11. ? ? }
  12. })
  13.  
  14. //表格下拉加载数据监听
  15. Vue.directive('loadmore', { //懒加载 ========>该方法为el-table下拉数据监听事件
  16. ? ? bind (el, binding) {
  17. ? ? ? ? const selectWrap = el.querySelector('.el-table__body-wrapper')
  18. ? ? ? ? selectWrap.addEventListener('scroll', function () {
  19. ? ? ? ? ? ? let sign = 100
  20. ? ? ? ? ? ? const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
  21. ? ? ? ? ? ? if (scrollDistance <= sign) {
  22. ? ? ? ? ? ? ? ? binding.value()
  23. ? ? ? ? ? ? }
  24. ? ? ? ? })
  25. ? ? }
  26. })
  27.  
  28. //以下是其他帮助类
  29. // v-dialogDragWidth: 弹窗宽度拖大 拖小
  30. Vue.directive('dialogDragWidth', {
  31. ? ? bind (el, binding, vnode, oldVnode) {
  32. ? ? ? ? const dragDom = binding.value.$el.querySelector('.el-dialog');
  33.  
  34. ? ? ? ? el.onmousedown = (e) => {
  35. ? ? ? ? ? ? // 鼠标按下,计算当前元素距离可视区的距离
  36. ? ? ? ? ? ? const disX = e.clientX - el.offsetLeft;
  37.  
  38. ? ? ? ? ? ? document.onmousemove = function (e) {
  39. ? ? ? ? ? ? ? ? e.preventDefault(); // 移动时禁用默认事件
  40.  
  41. ? ? ? ? ? ? ? ? // 通过事件委托,计算移动的距离
  42. ? ? ? ? ? ? ? ? const l = e.clientX - disX;
  43. ? ? ? ? ? ? ? ? dragDom.style.width = `${l}px`;
  44. ? ? ? ? ? ? }
  45.  
  46. ? ? ? ? ? ? document.onmouseup = function (e) {
  47. ? ? ? ? ? ? ? ? document.onmousemove = null;
  48. ? ? ? ? ? ? ? ? document.onmouseup = null;
  49. ? ? ? ? ? ? }
  50. ? ? ? ? }
  51. ? ? }
  52. })
  53.  
  54. //弹出框可拖拽
  55. //v-dialogDrag
  56. Vue.directive('dialogDrag', {
  57. ? ? bind (el, binding, vnode, oldVnode) {
  58. ? ? ? ? const dialogHeaderEl = el.querySelector('.el-dialog__header');
  59. ? ? ? ? const dragDom = el.querySelector('.el-dialog');
  60. ? ? ? ? dialogHeaderEl.style.cursor = 'move';
  61.  
  62. ? ? ? ? // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
  63. ? ? ? ? const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
  64.  
  65. ? ? ? ? dialogHeaderEl.onmousedown = (e) => {
  66. ? ? ? ? ? ? // 鼠标按下,计算当前元素距离可视区的距离
  67. ? ? ? ? ? ? let oevent = e || window.event;
  68. ? ? ? ? ? ? const disX = oevent.clientX - dialogHeaderEl.offsetLeft;
  69. ? ? ? ? ? ? const disY = oevent.clientY - dialogHeaderEl.offsetTop;
  70.  
  71. ? ? ? ? ? ? // 获取到的值带px 正则匹配替换
  72. ? ? ? ? ? ? let styL = 0, styT = 0;
  73.  
  74. ? ? ? ? ? ? // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
  75. ? ? ? ? ? ? if (sty.left.includes('%')) {
  76. ? ? ? ? ? ? ? ? styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
  77. ? ? ? ? ? ? ? ? styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
  78. ? ? ? ? ? ? } else {
  79. ? ? ? ? ? ? ? ? styL = sty.left != 'auto' ? (+sty.left.replace(/\px/g, '')) : (dialogHeaderEl.offsetLeft);
  80. ? ? ? ? ? ? ? ? styT = sty.top != 'auto' ? (+sty.top.replace(/\px/g, '')) : (dialogHeaderEl.offsetTop);
  81. ? ? ? ? ? ? }
  82.  
  83. ? ? ? ? ? ? document.onmousemove = function (e) {
  84. ? ? ? ? ? ? ? ? // 通过事件委托,计算移动的距离
  85. ? ? ? ? ? ? ? ? let oevent = e || window.event;
  86. ? ? ? ? ? ? ? ? const l = oevent.clientX - disX;
  87. ? ? ? ? ? ? ? ? const t = oevent.clientY - disY;
  88.  
  89. ? ? ? ? ? ? ? ? // 移动当前元素
  90. ? ? ? ? ? ? ? ? dragDom.style.left = `${l + styL}px`;
  91. ? ? ? ? ? ? ? ? dragDom.style.top = `${t + styT}px`;
  92.  
  93. ? ? ? ? ? ? ? ? // 将此时的位置传出去
  94. ? ? ? ? ? ? ? ? // binding.value({x:e.pageX,y:e.pageY})
  95. ? ? ? ? ? ? }
  96.  
  97. ? ? ? ? ? ? document.onmouseup = function (e) {
  98. ? ? ? ? ? ? ? ? document.onmousemove = null;
  99. ? ? ? ? ? ? ? ? document.onmouseup = null;
  100. ? ? ? ? ? ? }
  101. ? ? ? ? }
  102. ? ? }
  103. })

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

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

4.具体引用,页面

  1. <template>
  2. ?<el-table stripe
  3. ? ? ? ? ? ? ? ? :data="prescriptionRecordsList" //数据源
  4. ? ? ? ? ? ? ? ? v-loadmore="loadMore" //这个注册的监听方法,
  5. ? ? ? ? ? ? ? ? v-loading="loadingBox"//加载控制
  6. ? ? ? ? ? ? ? ? height="700px"//高度,注意:高度如果不给。可能不会出现滚动条,没有滚动条,滚动分页就不存在
  7. ? ? ? ? ? ? ? ? border>
  8. ?? ??? ?.......//省略table的列
  9. ? ?</el-table>
  10. </template>
  11.  
  12. data () {
  13. ? ? return {
  14. ? ? //分页属性,根据自己后台需求定
  15. ? ? ? modulePage: {
  16. ? ? ? ? page: {
  17. ? ? ? ? ? currentPage: 1,//当前页
  18. ? ? ? ? ? pageSize: 50,//每页显示的数量
  19. ? ? ? ? ? total: 0,//数据总数
  20. ? ? ? ? }
  21. ? ? ? },
  22. ? ? ? //数据源
  23. ? ? ? list: [],
  24. ? ? ? //el-table加载动画控制
  25. ? ? ? loadingBox: false,
  26. ? ? ? //调用方法控制
  27. ? ? ? loadSign: false,
  28. ? ? };
  29. ? },
  30. ? methods: {
  31. ? ?? ?init () {
  32. ? ? ? let that = this;
  33. ? ? ? this.modulePage.page.currentPage = 1;//如果出现多次加载情况,调用此方法是需要重置当前页为1
  34. ? ? ? this.prescriptionRecordsList =[]; //重置
  35. ? ? ? this.post("请求地址", this.modulePage).then(res => {//this.post()为自己分装的请求方法
  36. ? ? ? ? if (res.data.errorCode != "00") {
  37. ? ? ? ? ? this.$message.warning(res.data.errorMsg);
  38. ? ? ? ? ? return;
  39. ? ? ? ? }
  40. ? ? ? ? this.prescriptionRecordsList = res.data.sprbody.list; //返回的数据源
  41. ? ? ? ? that.modulePage.page.total = res.data.sprbody.total; //返回的数据总数
  42. ? ? ? ? that.loadSign = true; ?//增加控制?
  43. ? ? ? })
  44. ? ? },
  45. ? ? loadMore () {
  46. ? ? ? let that = this;
  47. ? ? ? if (this.loadSign) { //当其为true 的时候进入方法
  48. ? ? ? ?? ?//判断数据是否加载完毕,完毕就返回不在继续请求后台加载数据
  49. ? ? ? ? if (this.modulePage.page.currentPage > this.modulePage.page.total / this.modulePage.page.pageSize) {
  50. ? ? ? ? ? return;
  51. ? ? ? ? }
  52. ? ? ? ? //进入加载数据时,将控制字段更新,避免多次触发调用
  53. ? ? ? ? this.loadSign = false;
  54. ? ? ? ? this.loadingBox = true;//loading弹窗,过度动画
  55. ? ? ? ? this.modulePage.page.currentPage++; //增加当前页数
  56. ? ? ? ? setTimeout(() => {
  57. ? ? ? ? ? /**
  58. ? ? ? ? ? ?* 回调加载数据区
  59. ? ? ? ? ? ?*/
  60. ? ? ? ? ? that.loadPageValue();
  61. ? ? ? ? }, 500)
  62. ? ? ? } else {
  63. ? ? ? ? return;
  64. ? ? ? }
  65. ? ? },
  66. ? ? //回调加载数据区
  67. ? ? loadPageValue () {
  68. ? ? ? let that = this;
  69. ? ? ? this.post("请求地址", this.modulePage).then(res => {
  70. ? ? ? ? if (res.data.errorCode != "00") {
  71. ? ? ? ? ? this.$message.warning(res.data.errorMsg);
  72. ? ? ? ? ? return;
  73. ? ? ? ? }
  74. ? ? ? ? //将分页查询的数据拼接到初始化查询的数据上
  75. ? ? ? ? this.prescriptionRecordsList = this.prescriptionRecordsList.concat(res.data.sprbody);
  76. ? ? ? ? that.modulePage.page.total = res.data.sprbody.total; //我这边多次同一方法,继续返回了总数,防止数据发生变化。
  77. ? ? ? ? that.loadSign = true; //加载完之后,重置控制变为可继续加载状态
  78. ? ? ? ? that.loadingBox = false;//关掉过度动画
  79. ? ? ? })
  80. ? ? }
  81. ?},
  82. ? created () {
  83. ? ? this.init();//初始化加载数据
  84. ? }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号