mysql下拉刷新加载数据_mescroll.js上拉加载下拉刷新组件详解

本文主要为大家详细介绍了mescroll.js上拉加载下拉刷新组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

使用注意事项：

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.οndragstart=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 (

{this.state.datas.map((item,index)=>(

{item.id}

))}

);

}}

export default StretchingUp;

相关推荐：