附上链接地址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;
来源: http://www.jb51.net/article/128101.htm