Of Stack

PHP combined with Vue to achieve scrolling bottom loading effect

  • 2021-08-28 19:35:46
  • OfStack

Preface

Recently, the paging jump of a project on the mobile phone is not ideal. I made a rolling load of an Demo. I won't say much below. Let's take a look at the detailed introduction.

Realization thought

1. Get the distance from the scroll bar to the bottom getScrollBottomHeight()

2. Bind scroll events handleScroll() , handleScroll() Judge whether the distance from the scroll bar to the bottom is less than the set bottomHight, and add an loading attribute to prevent multiple triggers when sliding during loading, resulting in multiple loading

3. Ajax requests load. php, and obtains the content of the current page number (page+1) through Page

4. push to list, Vue automatically render a new list, and loading becomes false

Core Dom architecture 


<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>
</div>
</body>

Javascript code 


<script>
 var v = new Vue({
  el: "#Content",
  data: {
   list: [{title: " Use mind maps to complete your own code elegantly "},
    {title: " The fun of sliding left and right "},
    {title: "Spring Cloud ( 9 ) Highly Available Distributed Configuration Centers  Spring Cloud Config  Integration  Eureka  Services q"},
    {title: " " MYSQL "Encountered in business SQL Problem sorting set "},
    {title: "2018 In, how should the front end learn? "},
    {title: " Front end  ajax  Elegant scheme of request "},
    {title: "SegmentFault  Technical Weekly  Vol.39 -  What! The server blew up? "},
    {title: "Rokid  Try out the development board and start your journey of embedded development "},
    {title: " I'm floating around in my mind css Magic attribute "},
    {title: " Use python Solve mysql View import export dependency problem "},
    {title: "underscore  Anti-conflict and anti-conflict of series  Utility Functions"},
    {title: " Based on hand scouring  flexible  Adj.  Vue  Components: TextScroll --  Text scrolling "},
    {title: " Based on ' BOSS Recruitment information of direct employment ' Analyze what kind of enterprises need PHP Programmer "},
    {title: " Native js Infinite loop carousel module of series "},
    {title: "1 Understand the article HTML Document flow (normal flow)"},
    {title: " Interviewer's favorite volatile Keyword "},
    {title: "Spring Cloud ( 9 ) Highly Available Distributed Configuration Centers  Spring Cloud Config  Integration  Eureka  Services q"},
    {title: " " MYSQL "Encountered in business SQL Problem sorting set "},
    {title: "2018 In, how should the front end learn? "},
    {title: " Front end  ajax  Elegant scheme of request "},
    {title: "SegmentFault  Technical Weekly  Vol.39 -  What! The server blew up? "},
    {title: "Rokid  Try out the development board and start your journey of embedded development "},
    {title: " I'm floating around in my mind css Magic attribute "},
    {title: " Use python Solve mysql View import export dependency problem "},
    {title: "underscore  Anti-conflict and anti-conflict of series  Utility Functions"},
    {title: " Based on hand scouring  flexible  Adj.  Vue  Components: TextScroll --  Text scrolling "},
    {title: " Based on ' BOSS Recruitment information of direct employment ' Analyze what kind of enterprises need PHP Programmer "},
    {title: " Native js Infinite loop carousel module of series "},
    {title: "1 Understand the article HTML Document flow (normal flow)"},
    {title: " Interviewer's favorite volatile Keyword "},
    {title: "Rokid  Try out the development board and start your journey of embedded development "}],
   page: 5,// Total pages 
   nowPage: 1,// This page 
   loading: false,//1 Restrictions on step loading 
   bottomHight: 50,// The scroll bar does not trigger the time until it 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 scroll event 
 window.onload = function () {
  window.addEventListener('scroll', v.handleScroll)
 }
 // Distance from scroll bar to bottom 
 function getScrollBottomHeight() {
  return getPageHeight() - getScrollTop() - getWindowHeight();

 }
 // Page height 
 function getPageHeight() {
  return document.querySelector("html").scrollHeight
 }
 // Top of scroll bar   Height 
 function getScrollTop() {
  var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
  if (document.body) {
   bodyScrollTop = document.body.scrollTop;
  }
  if (document.documentElement) {
   documentScrollTop = document.documentElement.scrollTop;
  }
  scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
  return scrollTop;
 }
 function getWindowHeight() {
  var windowHeight = 0;
  if (document.compatMode == "CSS1Compat") {
   windowHeight = document.documentElement.clientHeight;
  } else {
   windowHeight = document.body.clientHeight;
  }
  return windowHeight;
 }
</script>

Summarize

Related articles: