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; 

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