PHP combined with Vue to achieve the rolling bottom loading effect, phpvue
Preface
The paging jump on the mobile phone end of a recent project is not ideal. I made a Demo of rolling loading. I will not talk much about it below. Let's take a look at the details.
Implementation
1. Obtain the distance from the scroll bar to the bottom.getScrollBottomHeight()
2. Bind a rolling eventhandleScroll(),handleScroll()Determine whether the distance from the scroll bar to the bottom is less than the configured bottomHight, and add a loading attribute to prevent multiple triggers during loading sliding, resulting in multiple Loads
3. Ajax requests load. php to query the content of the current Page (page + 1) through Page.
4. push the obtained content to the list. After the list is finished, Vue automatically renders the new list and changes loading to false.
Core Dom Structure
<Body> <div id = "Content"> <div> <ul> <li v-for = "l in list"> {l. title }}</li> <li class = "loading" v-if = "loading"> loading </li> </ul> </div> </body>
Javascript code
<Script> var v = new Vue ({el: "# Content", data: {list: [{title: "Use mind map, elegantly complete your own code "},{ title:" fun of sliding left and right "},{ title:" Spring Cloud (9) the highly available distributed configuration center Spring Cloud Config integrates Eureka service q "},{ title:" [MYSQL] collection of SQL problems encountered in the business "},{ title:" February 2018, how should I learn the frontend? "},{ Title:" elegant front-end ajax request solution "},{ title:" SegmentFault technology weekly Vol.39-what! Is the server blown up? "},{ Title:" Rokid Development Board trial, start your embedded development journey "},{ title:" css magic properties floating in my mind "},{ title: "Using python to solve the problem of mysql view Import and Export dependencies"}, {title: "underscore series conflict prevention and Utility Functions" },{ title: "Vue component based on shoutao flexible: textScroll -- text scroll "},{ title:" analyze what PHP programmers an enterprise needs based on 'recruitment information directly hired by boss' "},{ title: "Native js series of infinite loop carousel components" },{ title: "an article about HTML document stream (normal flow)" },{ title: "interviewer's favorite volatile keyword" },{ title: "Spring Cloud (9) high-availability distributed configuration center Spring Cloud C Onfig integrates Eureka service q "},{ title:" [MYSQL] SQL problem sorting set encountered in the business "},{ title:" How should the front-end learn in 2018? "},{ Title:" elegant front-end ajax request solution "},{ title:" SegmentFault technology weekly Vol.39-what! Is the server blown up? "},{ Title:" Rokid Development Board trial, start your embedded development journey "},{ title:" css magic properties floating in my mind "},{ title: "Using python to solve the problem of mysql view Import and Export dependencies"}, {title: "underscore series conflict prevention and Utility Functions" },{ title: "Vue component based on shoutao flexible: textScroll -- text scroll "},{ title:" analyze what PHP programmers an enterprise needs based on 'recruitment information directly hired by boss' "},{ title: "Native js series of infinite loop carousel components" },{ title: "an article about HTML document stream (normal flow)" },{ title: "interviewer's favorite volatile keyword" },{ title: "Rokid Development Board trial, start your embedded development journey"}], page: 5, // total number of pages NowPage: 1, // This page loading: false, // limits bottomHight: 50 for One-Step loading, // The trigger time when the scroll bar reaches a certain position}, methods: {handleScroll: function () {if (getScrollBottomHeight () <= v. bottomHight & v. nowPage <v. page & v. loading = false) {v. loading = true var url = "load. php "$. ajax ({type: "GET", url: url, async: true, dataType: "json", success: function (data) {for (var I = 0; I <data. length; I ++) {v. list. push (data [I])} V. nowPage ++ v. loading = false },}}}},}) // Add a rolling event window. onload = function () {window. addEventListener ('scroll ', v. handleScroll)} // The distance from the scroll bar to the bottom. function getScrollBottomHeight () {return getPageHeight ()-getScrollTop ()-getWindowHeight ();} // The page height function getPageHeight () {return document. querySelector ("html "). scrollHeight} // function getScrollTop () {var scrollTop = 0, bodyScrollT Op = 0, documentScrollTop = 0; if (document. body) {bodyScrollTop = document. body. scrollTop;} if (document.doc umentElement) {documentScrollTop = document.doc umentElement. scrollTop;} scrollTop = (bodyScrollTop-documentScrollTop> 0 )? BodyScrollTop: documentScrollTop; return scrollTop;} function getmediawheight () {var previous wheight = 0; if (document. compatMode = "CSS1Compat") {export wheight = document.doc umentElement. clientHeight;} else {transport wheight = document. body. clientHeight;} return shadowwheight;} </script>
Summary
The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
