时间:2021-05-26
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下
附上链接地址http://ponentDidMount(){ 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;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点1.npm安装npminstall--sa
本文介绍了react-nativeListView下拉刷新上拉加载实现。分享给大家,具体如下:先看效果图下拉刷新ReactNative提供了一个组件可以实现下拉
简介上拉加载,是目前手机网站加载数据的一种常用方式,本文主要讲解AnglarJs集成,上拉加载功能。通常与下拉刷新配置使用,下拉刷新请查阅。实现页面{{bran
本文实例为大家分享了iscroll动态加载数据的具体代码,供大家参考,具体内容如下加载中...上拉加载...js.//iScroll滚动条/上拉刷新/下拉加载v
微信小程序scroll-view实现上拉加载与下拉刷新的实例实现效果图:如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: