mescroll.js上拉加载下拉刷新组件使用详解

本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码，供大家参考，具体内容

本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码，供大家参考，具体内容如下

附上链接地址http://www.mescroll.com/api.html#NPM，手机端和浏览器都能够使用，唯一推荐； 使用过程中要注意这些问题http://www.mescroll.com/qa.html；

使用注意事项：

1、引入的时候出问题及时看官方给出的解决方案(基本上都必须看)；

2、react中一定要在dom渲染之后的方法（didMount）中初始化，因为这个需要拿到dom对象；

3、在react工程中，回调的数据一定要拼接，这是要注意的（datas:ctx.state.datas.concat(json.info)）；

4、很坑需要单页的里的html和body高度设置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 ( 
 <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; 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

mescroll.js上拉加载 mescroll.js下拉刷新组件 js上拉加载