一聚教程网:一个值得你收藏的教程网站

热门教程

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

热门栏目