mescroll.jsのプルアップ読み込み・プルダウン・リフレッシュコンポーネントの詳細説明

この記事では、主に mescroll.js のプルアップ、ロード、プルダウン、およびリフレッシュ コンポーネントの使用方法を詳しく紹介します。興味のある方は参考にしていただければ幸いです。

使用上の注意:

1. 導入時に問題が発生した場合は、公式の解決策を確認してください(基本的に必ず読む必要があります)。

2. dom レンダリング (didMount) の後、これには dom オブジェクトを取得する必要があるため、反応プロジェクトではコールバック データを結合する必要があります (datas:ctx.state.datas.concat(json.info) ) );

4. 単一ページの HTML と本文の高さを 100% に設定するのは非常に困難です。

簡単なコードは以下に添付されています

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;

関連推奨事項:

WeChat アプレット開発リスト プルアップ ロード プルダウン リフレッシュ サンプル コード

dropload.js プラグイン プルダウンリフレッシュおよびプルアップのロード方法

例では、より多くのプルダウンリフレッシュデータをロードするための mui プルアップのカプセル化プロセスを詳しく説明します

以上がmescroll.jsのプルアップ読み込み・プルダウン・リフレッシュコンポーネントの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。