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

  • 时间:2018-02-25 21:26 编辑:源码论坛 来源:源码家论坛 阅读:1717
  • 扫一扫,手机访问
摘要:这篇文章主要为大家详细介绍了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;
  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【源码编程|PHP编程】学校教育运营管理系统(2019-06-28 18:28)
【网站运营|建站经验】如何选择第四方支付平台,应该注意哪些问题(2019-06-26 16:29)
【网站运营|】聚合支付平台的建设与搭建(2019-05-28 15:29)
【数据库|Mysql】多多客发布 3.0.0-alpha.3开源版,支持微信、百度、支付宝小程序(2019-03-22 09:48)
【网站运营|网络赚钱】创客系统开发(创客零售系统开发)(2019-03-22 09:29)
【网站运营|网络赚钱】互联网广告模式你知道多少(2018-11-28 19:21)
【网站运营|网络赚钱】短视频如何赚钱 短视频自媒体实操经验分享+真实(2018-11-28 19:17)
【源码编程|PHP编程】PHP实现微信商户支付企业付款到零钱功能 教程(2018-11-27 10:46)
【源码编程|PHP编程】phpstudy2018升级MySQL5.5为5.7(图文)教程(2018-11-27 10:43)
【数据库|Mysql】Windows mysql 8.0.12安装配置方法图文教程(2018-11-27 10:41)
联系我们
Q Q:40020598
邮箱:40020598@qq.com
时间:09:00 - 19:00
源码交流群:19588881源码家交流③群
联系客服
客服① 客服② 售后 投诉 联系客服
400 20598
手机版

扫一扫进手机版
返回顶部