vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)
更新時(shí)間：2022年04月11日 14:21:13 作者：sc_爬坑之路
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue web滾動(dòng)條分頁(yè)的具體代碼，供大家參考，具體內(nèi)容如下
1.在你的幫助類(lèi)里面新建一個(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)聽(tīng)
Vue.directive('loadmore', { //懶加載 ========>該方法為el-table下拉數(shù)據(jù)監(jiān)聽(tīng)事件
? ? 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()
? ? ? ? ? ? }
? ? ? ? })
? ? }
})
//以下是其他幫助類(lèi)
// 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)事件
? ? ? ? ? ? ? ? // 通過(guò)事件委托，計(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) {
? ? ? ? ? ? ? ? // 通過(guò)事件委托，計(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.具體引用，頁(yè)面
<template>
?<el-table stripe
? ? ? ? ? ? ? ? :data="prescriptionRecordsList" //數(shù)據(jù)源
? ? ? ? ? ? ? ? v-loadmore="loadMore" //這個(gè)注冊(cè)的監(jiān)聽(tīng)方法，
? ? ? ? ? ? ? ? v-loading="loadingBox"http://加載控制
? ? ? ? ? ? ? ? height="700px"http://高度，注意：高度如果不給?？赡懿粫?huì)出現(xiàn)滾動(dòng)條，沒(méi)有滾動(dòng)條，滾動(dòng)分頁(yè)就不存在
? ? ? ? ? ? ? ? border>
?? ??? ?.......//省略table的列
? ?</el-table>
</template>
data () {
? ? return {
? ? //分頁(yè)屬性，根據(jù)自己后臺(tái)需求定
? ? ? modulePage: {
? ? ? ? page: {
? ? ? ? ? currentPage: 1,//當(dāng)前頁(yè)
? ? ? ? ? pageSize: 50,//每頁(yè)顯示的數(shù)量
? ? ? ? ? total: 0,//數(shù)據(jù)總數(shù)
? ? ? ? }
? ? ? },
? ? ? //數(shù)據(jù)源
? ? ? list: [],
? ? ? //el-table加載動(dòng)畫(huà)控制
? ? ? loadingBox: false,
? ? ? //調(diào)用方法控制
? ? ? loadSign: false,
? ? };
? },
? methods: {
? ?? ?init () {
? ? ? let that = this;
? ? ? this.modulePage.page.currentPage = 1;//如果出現(xiàn)多次加載情況，調(diào)用此方法是需要重置當(dāng)前頁(yè)為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彈窗，過(guò)度動(dòng)畫(huà)
? ? ? ? this.modulePage.page.currentPage++; //增加當(dāng)前頁(yè)數(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;
? ? ? ? }
? ? ? ? //將分頁(yè)查詢(xún)的數(shù)據(jù)拼接到初始化查詢(xún)的數(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)掉過(guò)度動(dòng)畫(huà)
? ? ? })
? ? }
?},
? created () {
? ? this.init();//初始化加載數(shù)據(jù)
? }以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue cli2.0單頁(yè)面title修改方法，非常不錯(cuò)，具有一定的參考借鑒,需要的朋友可以參考下2018-06-06
這篇文章主要給大家介紹了基于vue手寫(xiě)tree插件的那點(diǎn)事兒，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue+Echarts實(shí)現(xiàn)繪制動(dòng)態(tài)折線(xiàn)圖
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制動(dòng)態(tài)折線(xiàn)圖，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
基于Vue自定義指令實(shí)現(xiàn)按鈕級(jí)權(quán)限控制思路詳解
這篇文章主要介紹了基于vue自定義指令實(shí)現(xiàn)按鈕級(jí)權(quán)限控制,本文給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口
這篇文章主要介紹了vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
VUE前端實(shí)現(xiàn)token的無(wú)感刷新方式
這篇文章主要介紹了VUE前端實(shí)現(xiàn)token的無(wú)感刷新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue3中setup語(yǔ)法糖下父子組件間傳遞數(shù)據(jù)的方式
Vue3中父組件指的是包含一個(gè)或多個(gè)子組件的組件，它們通過(guò)props和事件等方式來(lái)傳遞數(shù)據(jù)和通信，這篇文章主要介紹了vue3中setup語(yǔ)法糖下父子組件間傳遞數(shù)據(jù)的方式,需要的朋友可以參考下2023-06-06
如果你在 vue3 開(kāi)發(fā)中使用了語(yǔ)法的話(huà),對(duì)于組件的name屬性,需要做一番額外的處理,下面這篇文章主要給大家介紹了關(guān)于Vue3?setup添加name的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析
這篇文章主要介紹了vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
Vue3中axios請(qǐng)求封裝、請(qǐng)求攔截與相應(yīng)攔截詳解
目前前端最流行的網(wǎng)絡(luò)請(qǐng)求庫(kù)還是axios,所以對(duì)axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于Vue3中axios請(qǐng)求封裝、請(qǐng)求攔截與相應(yīng)攔截的相關(guān)資料,需要的朋友可以參考下2023-05-05