mescroll.js上拉加载下拉刷新组件使用详解
网络 2017-11-15 1519
本文实例为大家分享了上拉加载下拉刷新组件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%。
下边附上简易代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 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; |
