本文實例為大家分享了上拉加載下拉刷新組件mescroll.js的具體代碼，供大家參考，具體內(nèi)容如下
10年積累的成都網(wǎng)站建設(shè)、做網(wǎng)站經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有興寧免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
附上鏈接地址http://www.mescroll.com/api.html#NPM，手機(jī)端和瀏覽器都能夠使用，唯一推薦；
使用過程中要注意這些問題http://www.mescroll.com/qa.html；
使用注意事項：
1、引入的時候出問題及時看官方給出的解決方案(基本上都必須看)；
2、react中一定要在dom渲染之后的方法（didMount）中初始化，因為這個需要拿到dom對象；
3、在react工程中，回調(diào)的數(shù)據(jù)一定要拼接，這是要注意的（datas:ctx.state.datas.concat(json.info)）；
4、很坑需要單頁的里的html和body高度設(shè)置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 (
{this.state.datas.map((item,index)=>(
{item.id}
))}
);
}}
export default StretchingUp; 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
