Detaillierte Erläuterung der Pull-Up-Lade- und Pull-Down-Aktualisierungskomponente von mescroll.js

Dieser Artikel stellt hauptsächlich die Verwendung der Pull-Up-, Load-, Pull-Down- und Refresh-Komponenten vor. Interessierte Freunde können darauf verweisen.

Vorsichtsmaßnahmen für die Verwendung:

1 Wenn bei der Einführung ein Problem auftritt, überprüfen Sie bitte rechtzeitig die offizielle Lösung (im Grunde müssen Sie sie lesen). ;

2. In der Methode (didMount) muss es nach dem DOM-Rendering initialisiert werden, da dies das Abrufen des Dom-Objekts erfordert Projekt reagieren, Rückruf Die Daten müssen gespleißt werden, was beachtet werden sollte (datas:ctx.state.datas.concat(json.info)>4. Es ist sehr schwierig, den HTML-Code zu benötigen und Textkörper auf einer einzelnen Seite. Die Höhe ist auf 100 % eingestellt.

Ein einfacher Code ist unten angehängt

Verwandte Empfehlungen:

WeChat-Applet-Entwicklungsliste, Pull-up-Laden, Pull-down-Aktualisierung, Beispielcode

import React, { Component, PropTypes } from 'react'; 
import MeScroll from "mescroll.js" 
 
class StretchingUp extends Component { 
  constructor(props, context) { 
    super(props, context); 
    this.state={ 
      datas:[], 
      total:0, 
    } 
    this.test = this.test.bind(this); 
  } 
  componentDidMount(){ 
    document.ondragstart=function() {return false;} 
    let ctx = this; 
    var mescroll = new MeScroll ( "mescroll" , {down : { use:false}, up : { 
      use:true, 
      auto:true, 
      offSet:100, 
      page:{ 
        num:0, 
        size:20, 
        time:null 
      }, 
      onScroll:function(mescroll, y, isUp){ 
      }, 
      callback:function (page, mescroll) { 
        ctx.test(page, mescroll); 
      }, 
      error: function (e) { 
      } 
    }} ) ; 
    mescroll.resetUpScroll() 
  } 
  test(page, mescroll){ 
    console.log(page) 
    let url = "http://localhost:5577/curpage/"+page.num+"/pagesize/"+page.size; 
    let ctx = this; 
    fetch(url,{ 
      method:'GET', 
      headers: { 
        'Accept': 'application/json', 
        'Content-Type': 'application/json', 
      }, 
    }).then((resp)=>{ 
      if(resp){ 
        return resp.json(); 
      }else{ 
        return false; 
      } 
    }) 
    .then((json)=>{ 
        ctx.setState({ 
        datas:ctx.state.datas.concat(json.info), 
        total:json.total 
      },()=>{ 
    }) 
 
    mescroll.endSuccess(); 
    return true; 
  }); 
  } 
  render() { 
    return ( 
      <p id="mescroll" className="mescroll" style={{height: "500px",overflow: "auto"}}> 
      {this.state.datas.map((item,index)=>( 
        <p key={index}> 
          {item.id} 
        </p> 
      ))} 
      </p> 
  ); 
  }} 
 
export default StretchingUp;

dropload.js-Plug-in, Pull-down-Aktualisierung und Pull-up-Lademethode

Beispiel für eine ausführliche Erklärung mui Der Kapselungsprozess des Hochziehens zum Laden weiterer Daten und des Herunterziehens zum Aktualisieren von Daten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Pull-Up-Lade- und Pull-Down-Aktualisierungskomponente von mescroll.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!