上拉加载下拉刷新组件-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;