How to Use the pull-down refresh component in mescroll. js,

How to Use the pull-down refresh component in mescroll. js,

This article shares the code of the pull-up and pull-down refresh component mescroll. js for your reference. The details are as follows:

The link is http://www.mescroll.com/api.html?npm, which can be used by both the mobile phone end and the browser. Only recommended;
Pay attention to these problems during use: http://www.mescroll.com/qa.html;

Note:

1. Check the solution provided by the official website in time for any problems during the introduction (which must be viewed basically );

2. react must be initialized in the didMount method after dom rendering because the dom object needs to be obtained;

3. In the react project, the callback data must be spliced. This is worth noting (datas: ctx. state. datas. concat (json.info ));

4. It is very difficult to set the html and body height of a single page to 100%.

The simple code is attached below

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 (       <div id="mescroll" className="mescroll" style={{height: "500px",overflow: "auto"}}>       {this.state.datas.map((item,index)=>(         <div key={index}>           {item.id}         </div>       ))}       </div>   );   }}  export default StretchingUp; 

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.