Vue10 Line code implementation pull-up page to load more data, pure handwriting JS implementation pull-down refresh pull-up page does not reference any third-party plug-ins

Vue10 Line code implementation pull-up page to load more data, pure handwriting JS implementation pull-down refresh pull-up page does not reference any third-party plugins/libraries
A mention of the mobile side of the pull-down refresh page, you might think of Iscroll plug-in, yes Iscroll is a high performance, resource-intensive, non-dependent, multi-platform JavaScript scrolling plugin. Iscroll is more than just scrolling. It can handle any element that requires the user to interact with the mobile. With only 4kb size iscroll in your project, your project will have scrolling, zooming, panning, infinite Scrolling, parallax scrolling, and rotation. Iscroll Strong Undoubtedly, I also very much welcome you to use Iscroll. And dropload is also very useful.
This article talked about the top-pull page load more methods of the core idea is actually very simple, the idea of a look on the road to Jane, although the code is very small, but the implementation process of the view and data of the interactive logic has some complex, not careful words, it is easy to circle, often particularly simple things, behind all have a very nuanced logic.
The method of this paper is implemented in VUE-CLI environment, the code contains the template and script, the method is useful to Document,window object, the first edition is somewhat rough.

This article realizes the top-pull page loading more core Idea is: if "loading" this layer is pulled up beyond the bottom of the page, trigger loading the next page method, it is so simple!

The most tedious part of this method is mainly in the interactive aspect: several "loading" layers are based on the timing of data rendering and the explicit control of pull-up operation. Most of the statements in the method are followed by comments, and the careful point should be able to straighten out the logic. This article only wrote the page of the function of the page to display, down refresh more simple also the same reason (each trigger will only load the first page to be able to), the method of this article can also be used in the idea of jquery, react, angular ... and other frameworks, because simple, so convenient. Understanding the idea is the most important, you can write your own handwriting after understanding.
sometimes seemingly complex problems, often can sword walk Pifo, curve salvation!

Okay, here's the code directly!

1. Template section:

<template><div v-if= "!! Datalist.length ">        <div v-for=" (item,index) in dataList ">            <!--data Display list--        </div>        <div id= "Loadmore" v-show= "Loadmore" > Loading </div><!--First load data--        <div id= "Loadmoreing" v-show= "loadmoreing" > Loading </div><!--Pull-up load data-        <div id= "Nomoredata" v-show= "loadmore?false:! Loadmoreing "> Show All Tasks </div><!--all data loading complete--></div><div id=" loadmoreing "v-else-if=" Loadmoreing "> Loading </div><!--page Rendering-    <div class=" NoData "v-else> no data </div></ Template>

2. Script section

    Export default {data () {return {datalist:new Array, datacurpage:1,//number        According to the page number loadmore:true,//loading the data at the time of loading the first time the data is loading}},        Mounted:function () {Let onscroll = Window.addeventlistener (' scroll ', this.scrollrun);//Monitor scrolling},        methods:{getdatalist:function () {this.loadmoreing = true;        Let _self = this; $.ajax ({type: "Post", Async:false, timeout:10000, DataType: "json", URL: " ", Data:{curpage:_self.datacurpage}, Success:function (data) {_self.loadmoreing = false;//receiving data, hiding the Load if (!! Data.dataList.length) {//If there is data if (_self.datacurpage==1) {//when loading the 1th page of data _self.datalist = new array;//        1-Page empty data if (data.datalist.length>0) {//If the 1th-page data bar is greater than 0 data.dataList.forEach (function (ele,i) { _self.datalist.push (ele);//fill page data}) _self.loadmore = true;//display is loading (outside the bottom of the screen)}else{_self. Loadmore = false;//No data hides loading}}else{//when loading page 2nd and later data if (Data.dat        alist.length>0) {Data.dataList.forEach (function (ele,i) {_self.datalist.push (ele);//fill page data}) _self.loadmore = true;//display is loading (outside the bottom of the screen)}else{_self.loadmore = false;//No data is hidden Loading}}//If the total number of pages = = Current page = No more data if (data.totalpage==_self                . datacurpage) {_self.loadmore = false;                _self.loadmoreing = false; }}, Error:function (Xhr,status,error) {Console.log ("                        Error ", Xhr,status,error);                    if (Status = = "Timeout") {_self.loadmoreing = False;weui.toast (' Request timed out ', 800);}              },      Complete:function () {_self.loadmoreing = false;} })}, Scrollrun:function () {//Core code if (This.loadmore = = true&&!!            document.getElementById ("Loadmore")) {//If there is more than one page of data in total, run let bodywidth = Document.body.offsetWidth; Let Bodyheight = window.innerheight* (375/bodywidth);//The 6s screen is the reference ratio let Loadmoretop = document.getElementById ("LoadMo Re "). Getboundingclientrect (). top* (375/bodywidth),//loadmore distance from the top if (bodyheight-loadmoretop>20) {//loadM Ore is pulled out at the bottom 20px//Console.log ("Bodyheight", Bodyheight, "Loadmoretop", Loadmoretop, "difference", Bodyheight-loadmoretop, "page number",        THIS.DATACURPAGE+1);        This.loadmore = false;//Stop running Scrollrun, otherwise it will trigger loading all pages this.getmorelist (_self.datacurpage++); }        }            },        }    }

　　

Vue10 Line code implementation pull-up page to load more data, pure handwriting JS implementation pull-down refresh pull-up page does not reference any third-party plug-ins