이 글은 mescroll.js의 풀업, 로드, 풀다운, 새로 고침 구성 요소의 사용법을 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
사용시 주의사항:
1. 도입시 문제가 있을 경우, 공식 해결방법을 제때 확인해주세요(기본적으로 읽어보셔야 합니다)
2. dom 렌더링(didMount) 후에는 dom 개체를 가져와야 하기 때문입니다.
3. 반응 프로젝트에서 콜백 데이터를 연결해야 하며 이는 주의해야 합니다(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!