LoadingList
加载更多组件
- 通过phMode设置加载更多的模式，有点击按钮加载更多，以及滑到最底端自动加载，可选 [button,auto] 2种参数。
- 通过loadingStatus设置当前状态，包括 0加载更多, 1加载中, 2数据加载成功, 3数据加载失败, 4没有更多。
- 可通过loadTips设置按钮文字和状态提示语，默认["加载更多","加载中","加载成功","加载失败","没有更多"]，分别对应loadingStatus的状态。
- 可通过buttonStyles设置按钮的样式，如果当前phMode为auto设置是看不到效果的，默认["primary","info","success","error","gray"]，分别对应loadingStatus的状态。
- 可通过onLoading设置点击按钮加载或滑到底部自动加载的回调函数。
- 可通过onLoadingEnd设置每次加载结束的回调函数。
主要属性和接口：
- phMode:加载更多的模式，默认auto。
- loadingStatus:当前状态:0加载更多, 1加载中, 2数据加载成功, 3数据加载失败, 4没有更多，默认1。
- loadTips:按钮文字和状态提示语，默认["加载更多","加载中","加载成功","加载失败","没有更多"]。
- buttonStyles:按钮的样式，默认["primary","info","success","error","gray"]。
- onLoading:点击按钮加载或滑到底部自动加载的回调函数。
- onLoadingEnd:每次加载结束的回调函数。
示例：
<LoadingList phMode="auto" loadingStatus={this.state.loadingStatus}
loadTips={["点击加载更多","加载中...","加载成功！","加载失败！","没有更多"]}
buttonStyles={["primary","gray","success","danger","gray"]}
onLoading={::this.onLoading} onLoadingEnd={::this.onLoadingEnd}>
...
</LoadingList>Constructor
LoadingList
LoadingList
()
Example:
import React, { Component } from "react";
import {LoadingList} from "phoenix-ui";
import Code from "./code/code";
import {ajax} from "./utils/tool.js";
export default class loadinglist extends Component{
constructor(props,context){
super(props,context);
this.count = 0;
this.state = {
loadingData : [],
loadingStatus: 1 // 状态：0"加载更多",1"加载中",2"加载成功",3"加载失败",4"没有更多"
}
this.getData("./data/post.json");
}
getData(fileName){ // 获取数据方法，ajax方法在下面定义了
ajax(fileName).then((json)=>{
let data = json.data;
let loadingData = this.state.loadingData.slice(0);
for(let i in data){
loadingData.push(data[i]);
}
this.setState({
loadingData: loadingData,
loadingStatus: json.final? 4:2
});
}, (error)=>{// 加载失败
this.setState({
loadingStatus: 3
});
console.error("出错了", error)
});
}
onLoading(){ // 加载更多的执行回调(点击按钮刷新或滑倒屏幕最下方自动刷新)
// 如果已经没有更多，不再执行请求数据的操作
if(this.state.loadingStatus==4) return;
// 点击之后显示加载中的状态
this.setState({
loadingStatus: 1
});
if(this.state.loadingStatus!=3) this.count++; // 请求失败继续请求当前json
this.getData("./data/post"+this.count+".json"); // 开始请求数据
}
onLoadingEnd(){ // DOM加载完成执行的回调
if(this.state.loadingStatus==3) return;
this.setState({
loadingStatus: 0
});
}
render(){
return(
<div>
<h2 className="comp-title">LoadingList</h2>
<h3 className="comp-type">phMode(默认auto) 加载更多的模式，可选[auto,button]</h3>
<h3 className="comp-type">loadingStatus(默认1) 0－加载更多, 1－加载中, 2－数据加载成功, 3－数据加载失败, 4－没有更多</h3>
<h3 className="comp-type">buttonStyles 按钮的样式，默认["primary","info","success","error","gray"]</h3>
<h3 className="comp-type">loadTips 按钮文字和状态提示语，默认["加载更多","加载中","加载成功","加载失败","没有更多"]</h3>
<h3 className="comp-type">onLoading函数 点击按钮加载或滑到底部自动加载的回调函数</h3>
<h3 className="comp-type">onLoadingEnd函数 每次加载结束的回调函数</h3>
<LoadingList phMode="auto" loadingStatus={this.state.loadingStatus}
loadTips={["点击加载更多","加载中...","加载成功！","加载失败！","没有更多"]}
buttonStyles={["primary","gray","success","danger","gray"]}
onLoading={::this.onLoading} onLoadingEnd={::this.onLoadingEnd}>
<ul>
{
this.state.loadingData.map((data,index)=>{
return (
<li key={index}>
<img src={data.image} alt={data.title} />
<p>{data.title}</p>
<p>{data.desp}</p>
</li>
);
})
}
</ul>
</LoadingList>
<Code target="loadinglist" />
</div>
);
}
}方法
onLoading
onLoading
()
点击按钮加载或滑到底部自动加载的回调函数，用户在该函数内自定义请求
onLoadingEnd
onLoadingEnd
()
每次加载结束的回调函数
属性
classPrefix
String
样式前缀
Default:
'loading-list'
loadingStatus
Number
加载状态：0加载更多, 1加载中, 2数据加载成功, 3数据加载失败, 4没有更多
Default:
1
loadTips
Array
加载5个状态的文字描述，默认["加载更多","加载中","加载成功","加载失败","没有更多"]
Default:
["加载更多","加载中","加载成功","加载失败","没有更多"]
phStyle
String
加载更多的模式，可选[button,auto], 默认auto
Default:
'auto'