vue怎么實(shí)現(xiàn)web滾動(dòng)條分頁

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

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

2.將下面的代碼復(fù)制進(jìn)去

import Vue from 'vue'

// 聚焦指令
// 注冊(cè)一個(gè)全局自定義指令 `v-focus`
// v-focus
Vue.directive('focus', {
    // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
    inserted: function (el) {
        // 聚焦元素
        el.focus();
    }
})

//表格下拉加載數(shù)據(jù)監(jiān)聽
Vue.directive('loadmore', { //懶加載 ========>該方法為el-table下拉數(shù)據(jù)監(jiān)聽事件
    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) => {
            // 鼠標(biāo)按下，計(jì)算當(dāng)前元素距離可視區(qū)的距離
            const disX = e.clientX - el.offsetLeft;

            document.onmousemove = function (e) {
                e.preventDefault(); // 移動(dòng)時(shí)禁用默認(rèn)事件

                // 通過事件委托，計(jì)算移動(dòng)的距離
                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) => {
            // 鼠標(biāo)按下，計(jì)算當(dāng)前元素距離可視區(qū)的距離
            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% 移動(dòng)之后賦值為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) {
                // 通過事件委托，計(jì)算移動(dòng)的距離
                let oevent = e || window.event;
                const l = oevent.clientX - disX;
                const t = oevent.clientY - disY;

                // 移動(dòng)當(dāng)前元素
                dragDom.style.left = `${l + styL}px`;
                dragDom.style.top = `${t + styT}px`;

                // 將此時(shí)的位置傳出去
                // binding.value({x:e.pageX,y:e.pageY})
            }

            document.onmouseup = function (e) {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    }
})

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

import "./utils/slidePagination";  //雙引號(hào)中的內(nèi)容為你文件所在位置

4.具體引用，頁面

<template>
 <el-table stripe
                :data="prescriptionRecordsList" //數(shù)據(jù)源
                v-loadmore="loadMore" //這個(gè)注冊(cè)的監(jiān)聽方法，
                v-loading="loadingBox"//加載控制
                height="700px"//高度，注意：高度如果不給?？赡懿粫?huì)出現(xiàn)滾動(dòng)條，沒有滾動(dòng)條，滾動(dòng)分頁就不存在
                border>
        .......//省略table的列
   </el-table>
</template>

data () {
    return {
    //分頁屬性，根據(jù)自己后臺(tái)需求定
      modulePage: {
        page: {
          currentPage: 1,//當(dāng)前頁
          pageSize: 50,//每頁顯示的數(shù)量
          total: 0,//數(shù)據(jù)總數(shù)
        }
      },
      //數(shù)據(jù)源
      list: [],
      //el-table加載動(dòng)畫控制
      loadingBox: false,
      //調(diào)用方法控制
      loadSign: false,
    };
  },
  methods: {
      init () {
      let that = this;
      this.modulePage.page.currentPage = 1;//如果出現(xiàn)多次加載情況，調(diào)用此方法是需要重置當(dāng)前頁為1
      this.prescriptionRecordsList =[]; //重置
      this.post("請(qǐng)求地址", this.modulePage).then(res => {//this.post()為自己分裝的請(qǐng)求方法
        if (res.data.errorCode != "00") {
          this.$message.warning(res.data.errorMsg);
          return;
        }
        this.prescriptionRecordsList = res.data.sprbody.list; //返回的數(shù)據(jù)源
        that.modulePage.page.total = res.data.sprbody.total; //返回的數(shù)據(jù)總數(shù)
        that.loadSign = true;  //增加控制 
      })
    },
    loadMore () {
      let that = this;
      if (this.loadSign) { //當(dāng)其為true 的時(shí)候進(jìn)入方法
          //判斷數(shù)據(jù)是否加載完畢，完畢就返回不在繼續(xù)請(qǐng)求后臺(tái)加載數(shù)據(jù)
        if (this.modulePage.page.currentPage > this.modulePage.page.total / this.modulePage.page.pageSize) {
          return;
        }
        //進(jìn)入加載數(shù)據(jù)時(shí)，將控制字段更新，避免多次觸發(fā)調(diào)用
        this.loadSign = false;
        this.loadingBox = true;//loading彈窗，過度動(dòng)畫
        this.modulePage.page.currentPage++; //增加當(dāng)前頁數(shù)
        setTimeout(() => {
          /**
           * 回調(diào)加載數(shù)據(jù)區(qū)
           */
          that.loadPageValue();
        }, 500)
      } else {
        return;
      }
    },
    //回調(diào)加載數(shù)據(jù)區(qū)
    loadPageValue () {
      let that = this;
      this.post("請(qǐng)求地址", this.modulePage).then(res => {
        if (res.data.errorCode != "00") {
          this.$message.warning(res.data.errorMsg);
          return;
        }
        //將分頁查詢的數(shù)據(jù)拼接到初始化查詢的數(shù)據(jù)上
        this.prescriptionRecordsList = this.prescriptionRecordsList.concat(res.data.sprbody);
        that.modulePage.page.total = res.data.sprbody.total; //我這邊多次同一方法，繼續(xù)返回了總數(shù)，防止數(shù)據(jù)發(fā)生變化。
        that.loadSign = true; //加載完之后，重置控制變?yōu)榭衫^續(xù)加載狀態(tài)
        that.loadingBox = false;//關(guān)掉過度動(dòng)畫
      })
    }
 },
  created () {
    this.init();//初始化加載數(shù)據(jù)
  }

以上就是關(guān)于“vue怎么實(shí)現(xiàn)web滾動(dòng)條分頁”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。