Shulou(Shulou.com)05/31 Report--

This "vue how to achieve web scroll bar paging" article most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "vue how to achieve web scroll bar paging" article.

1. Create a new slidePagination.js file in your helper class

two。 Copy the following code into it

Import Vue from 'vue'// focus directive / / register a global custom directive `v- focus` / / v-focusVue.directive (' focus', {/ / when the bound element is inserted into the DOM. Inserted: function (el) {/ / focus element el.focus () }}) / / Table drop-down load data listening Vue.directive ('loadmore', {/ / lazy load = > this method is the el-table drop-down data listening event bind (el, binding) {const selectWrap = el.querySelector (' .el-table__body-wrapper') selectWrap.addEventListener ('scroll') Function () {let sign = 100const scrollDistance = this.scrollHeight-this.scrollTop-this.clientHeight if (scrollDistance {/ / mouse down Calculate the distance of the current element from the visual area const disX = e.clientX-el.offsetLeft _ document.onmousemove = function (e) {e.preventDefault (); / / disable the default event when moving / / calculate the distance moved by event delegate, const l = e.clientX-disX; dragDom.style.width = `$ {l} px` } _ document.onmouseup = function (e) {_ document.onmousemove = null; _ document.onmouseup = null;}) / / pop-up box can be dragged / / v-dialogDragVue.directive ('dialogDrag', {bind (el, binding, vnode, oldVnode) {const dialogHeaderEl = el.querySelector (' .el-dialog__header') Const dragDom = el.querySelector ('.el-dialog'); dialogHeaderEl.style.cursor =' move'; / / get the original attribute ie dom element. CurrentStyle Firefox Google window.getComputedStyle (dom element, null); const sty = dragDom.currentStyle | | window.getComputedStyle (dragDom, null) DialogHeaderEl.onmousedown = (e) = > {/ / Mouse press to calculate the distance between the current element and the visual area let oevent = e | window.event; const disX = oevent.clientX-dialogHeaderEl.offsetLeft; const disY = oevent.clientY-dialogHeaderEl.offsetTop; / / the value obtained with px canonical matching replace let styL = 0, styT = 0 / / Note that the value obtained for the first time in ie is assigned to px if (sty.left.includes ('%')) {styL = + document.body.clientWidth * (+ sty.left.replace (/\% / g,'') / 100) after the component is moved by 50%. 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) {/ / calculate the moving distance let oevent = e through the event delegate | | window.event; const l = oevent.clientX-disX Const t = oevent.clientY-disY; / / move the current element dragDom.style.left = `${l + styL} px`; dragDom.style.top =` ${t + styT} px` / / send out the location at this time / / binding.value ({x _ document.onmousemove. PageX _ jiggle. PageY})} _ document.onmouseup = function (e) {_ document.onmousemove = null; _ document.onmouseup = null;})

3. Reference this file in main.js

Import ". / utils/slidePagination"; / / the contents in a double quotation mark are the location of your file.

4. Specific references, pages

. / / omit the column data () {return {/ / paging property of table According to your background needs, set modulePage: {page: {currentPage: 1 pageSize: 50 el-table / number of pages displayed per page total: 0 minute pinch / data totals}}, / / data source list: [], / / el-table load animation control loadingBox: false / / call method control loadSign: false,} }, methods: {init () {let that = this; this.modulePage.page.currentPage = 1 this.prescriptionRecordsList / if multiple loads occur, you need to reset the current page to 1 page = [] / / reset this.post ("request address", this.modulePage) .then (res = > {/ / this.post () request method if (res.data.errorCode! = "00") {this.$message.warning (res.data.errorMsg); return;} this.prescriptionRecordsList = res.data.sprbody.list / / returned data source that.modulePage.page.total = res.data.sprbody.total; / / Total number of returned data that.loadSign = true; / / increase control})}, loadMore () {let that = this If (this.loadSign) {/ / enter the method / / determine whether the data has been loaded when it is true, and then return not to continue the request to load data in the background if (this.modulePage.page.currentPage > this.modulePage.page.total / this.modulePage.page.pageSize) {return } / / when loading data is entered, field updates will be controlled to avoid triggering multiple calls to this.loadSign = false; this.loadingBox = true;//loading pop-up window and over-animating this.modulePage.page.currentPage++ / / increase the number of current pages setTimeout (() = > {/ * callback load data area * / that.loadPageValue ();}, 500)} else {return;}}, / / callback load data area loadPageValue () {let that = this This.post ("request address", this.modulePage) .then (res = > {if (res.data.errorCode! = "00") {this.$message.warning (res.data.errorMsg); return;} / / splices the data of the paging query to the data of the initial query this.prescriptionRecordsList = this.prescriptionRecordsList.concat (res.data.sprbody) That.modulePage.page.total = res.data.sprbody.total; / / I have the same method many times and continue to return the total to prevent the data from changing. That.loadSign = true; / / after loading, the reset control becomes able to continue to load that.loadingBox = false;// turn off excessive animation}, created () {this.init () / / initialize loading data} the above is the content of this article on "how vue implements web scroll bar paging". I believe everyone has a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about related knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.