Pure JS Implementation load more (Vue framework)

Tag:data   script    Update    str   promise     distance    read   resources   method   

<template> <div class = ' car_list ' reft= ' scrollobx ' @scroll = ' scrollready ($event) ' > </div></temp Late><script> Export Default {data () {return {lengththreshold:50,///when sliding to            From low end 50px, update data timethreshold:300, Promise:null}}, methods: { Scroll load list Scrollready () {if (This.shouldscroll ()) {if (This.promis                    e) {return;                    }//Load This.fn ();                    Prevent multiple swipe, frequently request background resources let Self = this;                    This.promise = SetTimeout (() = {self.promise = null;                }, This.timethreshold);            }},//Call the parent component to request the Resource service FN () {this. $emit (' Scrollchange '); }, Shouldscroll () {if (docUment.scrolltop = = 0) {//sliding distance of 0, not beginning to slide return false; }
List height-list visual height-sliding height < 50px, load more return this. $refs. scrollbox.scrollheight-this. $refs. Scrollbox.            Clientheight-this. $refs. scrollbox.scrolltop < This.lengththreshold; },}}</script>

Request Service method for parent component:

Querycarapplysharelist () {this        . Load = true;        CarResources.methods.queryCarApplyShareList (This.http, This.pageno, this.pagesize). Then (res) + = {          if (res && Res.status = = =) {               if (This.pageno = = = 1) {//Load first page data this                   . Carlist = Res.data | | [];               } else {//load more this                  . Carlist.concat (res.data);               }               This. Islastpage = Res.data.length = = = 0          } this          . Load = false;       }, () = = {this          . Load = false;          Console.log (' interface error ');}       );

　　

Pure JS Implementation load more (Vue framework)