vue怎么實現web滾動條分頁

這篇“vue怎么實現web滾動條分頁”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue怎么實現web滾動條分頁”文章吧。

1.在你的幫助類里面新建一個slidePagination.js文件

2.將下面的代碼復制進去

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中引用

import "./utils/slidePagination";  //雙引號中的內容為你文件所在位置

4.具體引用，頁面

<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滾動條分頁”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。