PHP combined with Vue to achieve the rolling bottom loading effect, phpvue

Source: Internet
Author: User
Tags what php mysql view

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.