Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée du composant d'actualisation déroulant de chargement pull-up mescroll.js

小云云
Libérer: 2018-01-19 13:25:27
original
3104 Les gens l'ont consulté

Cet article présente principalement en détail l'utilisation des composants d'extraction, de chargement, d'extraction et d'actualisation de mescroll.js. J'espère qu'il pourra aider tout le monde.

Précautions d'utilisation :

1 S'il y a un problème lors de son introduction, veuillez vérifier la solution officielle à temps (en gros, vous devez la lire) ;

2. Dans React, il doit être initialisé dans la méthode (didMount) après le rendu dom, car cela nécessite d'obtenir l'objet dom ; React project, callback Les données doivent être épissées, ce qui doit être noté (datas:ctx.state.datas.concat(json.info));

4. et le corps sur une seule page. La hauteur est fixée à 100 %.

Un code simple est joint ci-dessous



Recommandations associées :

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;
Copier après la connexion


Liste de développement d'applets WeChat, chargement par extraction, exemple de code d'actualisation déroulante

rafraîchissement déroulant du plug-in dropload.js et méthode de chargement par extraction

Exemple d'explication détaillée mui Le processus d'encapsulation consistant à extraire pour charger plus de données et à extraire pour actualiser les données

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal