首页 > 编程 > JavaScript > 正文

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

2019-11-19 14:56:39
字体:
来源:转载
供稿:网友

本文实例为大家分享了上拉加载下拉刷新组件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; 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表