未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

本文实例为大家分享了上拉加载下拉刷新组件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;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: React浏览器数据
分页:12
转载请注明
本文标题:mescroll.js上拉加载下拉刷新组件使用详解
本站链接:http://www.codesec.net/view/568351.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(13)