html上拉加载刷新数据库,mescroll.js上拉加载下拉刷新组件使用详解

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

发布时间：2020-10-21 12:21:08

来源：脚本之家

阅读：78

作者：净心净意

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

{this.state.datas.map((item,index)=>(

{item.id}

))}

);

}}

export default StretchingUp;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。