この記事では、主に 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 サイトの他の関連記事を参照してください。