HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

模板中心避免数据过多，造成卡顿，懒加载

This commit is contained in:
red-deng-deng 2022-01-21 17:11:16 +08:00
parent 64ddb0f97d
commit cf0e21530e
1 changed files with 70 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/pages/exchangepage/template/main.js
View File

@ -31,6 +31,7 @@ export default class mytemplate extends React.Component{
typeList:[{id:-1,title:"全部"}],
tabIndex:0,
sourceIndex:0,
page:1,
typeIndex:0,
system_template:[],
preview_visible:false,
@ -38,6 +39,7 @@ export default class mytemplate extends React.Component{
top:"",
toTopshow:false,
toTopFlag:false,
endreq:true,
center:"",
bottom:""
}
@ -64,7 +66,7 @@ export default class mytemplate extends React.Component{
})
}).catch(err=>{
});
let data={page:1,limit:10000}
let data={page:1,limit:10}
getSystemTemplate(data).then(res=>{
handelResponse(res,(req,msg)=>{
this.setState({system_template:req.data})
@ -77,9 +79,57 @@ export default class mytemplate extends React.Component{
//监听滚动条滚动事件
this.refs.component.addEventListener('scroll',(event)=>{
let scrolHeight=event.target.scrollTop;
console.log('滚动事件',event);
if(scrolHeight>300){
this.setState({toTopFlag:true});
let isBottom=event.target.scrollHeight-event.target.clientHeight;
if(isBottom==event.target.scrollTop){
let endreq=this.state.endreq;
if(endreq){
let page=this.state.page;//请求
page=page+1;
console.log(91,this.state);
let data={page:page,limit:10}
if(this.state.sourceIndex==0){//系统模板
if(this.state.typeIndex>0){
data.type_id=this.state.typeIndex;
}
let preResult=this.state.system_template;
getSystemTemplate(data).then(res=>{
handelResponse(res,(req,msg)=>{
if(req.data.length>0){
let addres=preResult.concat(req.data)
this.setState({system_template:addres,page:page})
}else{
this.setState({endreq:false});
}
},(err)=>{
})
}).catch(err=>{
});
}else{
let preResult=this.state.system_template;
getTheme(data).then(res=>{
handelResponse(res,(req,msg)=>{
if(req.data.length>0){
let addres=preResult.concat(req.data)
this.setState({system_template:addres,page:page})
}else{
this.setState({endreq:false});
}
},(err)=>{
})
}).catch(err=>{
});
}
}
}
}else{
this.setState({toTopFlag:false});
}
@ -98,25 +148,30 @@ export default class mytemplate extends React.Component{
window.location.href= "/#/edittemplate"
}
typeClick(e){
this.setState({typeIndex:e})
this.setState({typeIndex:e,page:1})
if(e == -1)//全部
{
let data={page:1,limit:10000}
let data={page:1,limit:10}
getSystemTemplate(data).then(res=>{
handelResponse(res,(req,msg)=>{
console.log(req)
this.setState({system_template:req.data})
this.setState({system_template:req.data})
if(req.data.length<10){
this.setState({endreq:false});
}
},(err)=>{
})
}).catch(err=>{
});
}else{
let data={type_id:e,page:1,limit:10000}
let data={type_id:e,page:1,limit:10}
getSystemTemplate(data).then(res=>{
handelResponse(res,(req,msg)=>{
this.setState({system_template:req.data})
if(req.data.length<10){
this.setState({endreq:false});
}
},(err)=>{
})
@ -126,14 +181,14 @@ export default class mytemplate extends React.Component{
}
}
sourceClick(e){
this.setState({sourceIndex:e})
this.setState({sourceIndex:e,page:1,endreq:true})
if(e == 0)
{
let data={page:1,limit:10000}
let data={page:1,limit:10}
getSystemTemplate(data).then(res=>{
handelResponse(res,(req,msg)=>{
console.log(req)
this.setState({system_template:req.data})
},(err)=>{
@ -143,7 +198,7 @@ export default class mytemplate extends React.Component{
});
}
else{
let data={page:1,limit:10000}
let data={page:1,limit:10}
getTheme(data).then(res=>{
handelResponse(res,(req,msg)=>{
this.setState({system_template:req.data})
@ -353,7 +408,9 @@ export default class mytemplate extends React.Component{
</div>:null
}
<div style={{textAlign:'center',color:'#BBC1D2',marginBottom:'15px'}}>到底部了哟,没有了哦</div>
<div style={{textAlign:'center',color:'#BBC1D2',marginBottom:'15px'}}>
{this.state.endreq?'正在加载中...':'到底部了哟,没有了哦'}
</div>
</div>
</div>
</div>