您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

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

2024/3/25 19:03:30发布29次查看
本文主要为大家详细介绍了mescroll.js上拉加载下拉刷新组件的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。
使用注意事项:
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 ( <p id="mescroll" classname="mescroll" style={{height: "500px",overflow: "auto"}}> {this.state.datas.map((item,index)=>( <p key={index}> {item.id} </p> ))} </p> ); }} export default stretchingup;
相关推荐:
微信小程序开发列表上拉加载下拉刷新示例代码
dropload.js插件下拉刷新和上拉加载方法
实例详解mui上拉加载更多下拉刷新数据的封装过程
以上就是mescroll.js上拉加载下拉刷新组件详解的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product