本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码，供大家参考，具体内容如下
附上链接地址，手机端和浏览器都能够使用，唯一推荐； 使用过程中要注意这些问题；
使用注意事项：
1、引入的时候出问题及时看官方给出的解决方案(基本上都必须看)；
2、react中一定要在dom渲染之后的方法（didMount）中初始化，因为这个需要拿到dom对象；
3、在react工程中，回调的数据一定要拼接，这是要注意的（datas:ctx.state.datas.concat(json.info)）；
4、很坑需要单页的里的html和body高度设置100%。
下边附上简易代码
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
},()=>{
})
);
}}
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)=>(
{item.id}
))}
export default StretchingUp;
