phoenix-ui
Version:
future team ui for app with react
1,170 lines (653 loc) • 34.5 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimal-ui" />
<title>LoadingList - phoenix-ui</title>
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
</head>
<body class="yui3-smart" _assetsPath="../assets">
<nav class="navbar navbar-inverse navbar-fixed-top custom-navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand mainlogo" href="">
<img alt="phoenix-ui" src="../assets/css/logo.png" title="phoenix-ui">
phoenix-ui
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">主页</a>
</li>
</ul>
<div class="navbar-form navbar-right filterAPi" autocomplete="off">
<input type="text" id='txtSearchAPI' class="form-control search-query" placeholder="Search for API" />
<ul id="filterList" class="filterItems dropdown-menu" role="menu"></ul>
</div>
</div>
</div>
</nav>
<div id="sidebar">
<h3>模块/类</h3>
<div id="api-tabview-filter">
<input id='txtSearch' type="search" class="form-control" placeholder="Type to filter Modules/Classes">
</div>
<dl id="sidebar_list">
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/基础组件.html">基础组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Button.html">Button</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/ButtonGroup.html">ButtonGroup</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Star.html">Star</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/布局组件.html">布局组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Row.html">Row</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/TableView.html">TableView</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Col.html">Col</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Grid.html">Grid</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/弹出框组件.html">弹出框组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Alert.html">Alert</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Dialog.html">Dialog</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Prompt.html">Prompt</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/提示组件.html">提示组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Popover.html">Popover</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Whisper.html">Whisper</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/操作类组件.html">操作类组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/ImageList.html">ImageList</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/LoadingList.html">LoadingList</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Popup.html">Popup</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Slider.html">Slider</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Steps.html">Steps</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Toast.html">Toast</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Accordion.html">Accordion</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Swipe.html">Swipe</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/标签组件.html">标签组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Icon.html">Icon</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Badge.html">Badge</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Label.html">Label</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/菜单组件.html">菜单组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Menu.html">Menu</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuBody.html">MenuBody</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuHeader.html">MenuHeader</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuItem.html">MenuItem</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuList.html">MenuList</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuNav.html">MenuNav</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/表单组件.html">表单组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Input.html">Input</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Switch.html">Switch</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/FormGroup.html">FormGroup</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/TextArea.html">TextArea</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/辅助组件.html">辅助组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Drag.html">Drag</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Animate.html">Animate</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/选项卡.html">选项卡</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Tab.html">Tab</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Tabset.html">Tabset</a>
<ul>
</ul>
</li>
</ul>
</dd>
</dl>
<div class="icon-sidebar-btn icon-sidebar-btn-open"><span class="glyphicon glyphicon-chevron-left"></span>收起</div>
</div>
<div class="stdoc-content">
<div class="apidocs">
<div id="docs-main">
<div class="content">
<div class="page-header">
<h1>LoadingList</h1>
</div>
<div class="well well-small sign-left3">
<div class="stdoc-code"><p>加载更多组件<br/></p>
<ul>
<li>通过phMode设置加载更多的模式，有点击按钮加载更多，以及滑到最底端自动加载，可选 [button,auto] 2种参数。</li>
<li>通过loadingStatus设置当前状态，包括 0加载更多, 1加载中, 2数据加载成功, 3数据加载失败, 4没有更多。</li>
<li>可通过loadTips设置按钮文字和状态提示语，默认["加载更多","加载中","加载成功","加载失败","没有更多"]，分别对应loadingStatus的状态。</li>
<li>可通过buttonStyles设置按钮的样式，如果当前phMode为auto设置是看不到效果的，默认["primary","info","success","error","gray"]，分别对应loadingStatus的状态。</li>
<li>可通过onLoading设置点击按钮加载或滑到底部自动加载的回调函数。</li>
<li>可通过onLoadingEnd设置每次加载结束的回调函数。</li>
</ul>
<p>主要属性和接口：</p>
<ul>
<li>phMode:加载更多的模式，默认auto。</li>
<li>loadingStatus:当前状态:0加载更多, 1加载中, 2数据加载成功, 3数据加载失败, 4没有更多，默认1。</li>
<li>loadTips:按钮文字和状态提示语，默认["加载更多","加载中","加载成功","加载失败","没有更多"]。</li>
<li>buttonStyles:按钮的样式，默认["primary","info","success","error","gray"]。</li>
<li>onLoading:点击按钮加载或滑到底部自动加载的回调函数。</li>
<li>onLoadingEnd:每次加载结束的回调函数。</li>
</ul>
<p>示例：</p>
<pre><code class="lang-code"> <LoadingList phMode="auto" loadingStatus={this.state.loadingStatus}
loadTips={["点击加载更多","加载中...","加载成功！","加载失败！","没有更多"]}
buttonStyles={["primary","gray","success","danger","gray"]}
onLoading={::this.onLoading} onLoadingEnd={::this.onLoadingEnd}>
...
</LoadingList></code></pre>
</div>
</div>
<div class="well well-small sign-left2 container-fluid" id="classesItems">
<div class="row">
<div class="index-section methods col-sm-4">
<h3>方法</h3>
<ul class="index-list methods extends">
<li class="index-item method">
<a href="#" data-tabid="#method" data-anchor="#method_onLoading" data-tablink="onLoading">onLoading</a>
</li>
<li class="index-item method">
<a href="#" data-tabid="#method" data-anchor="#method_onLoadingEnd" data-tablink="onLoadingEnd">onLoadingEnd</a>
</li>
</ul>
</div>
<div class="index-section properties col-sm-4">
<h3>属性</h3>
<ul class="index-list properties extends">
<li class="index-item property">
<a href="#" data-tabid="#property" data-anchor="#property_buttonStyles" data-tablink="buttonStyles">buttonStyles</a>
</li>
<li class="index-item property">
<a href="#" data-tabid="#property" data-anchor="#property_classPrefix" data-tablink="classPrefix">classPrefix</a>
</li>
<li class="index-item property">
<a href="#" data-tabid="#property" data-anchor="#property_loadingStatus" data-tablink="loadingStatus">loadingStatus</a>
</li>
<li class="index-item property">
<a href="#" data-tabid="#property" data-anchor="#property_loadTips" data-tablink="loadTips">loadTips</a>
</li>
<li class="index-item property">
<a href="#" data-tabid="#property" data-anchor="#property_phStyle" data-tablink="phStyle">phStyle</a>
</li>
</ul>
</div>
<div class="index-section events col-sm-4">
<h3>事件</h3>
</div>
</div>
</div>
<div class="">
<ul id="itemTab" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#class">详情</a></li>
<li class=""><a data-toggle="tab" href="#method">方法</a></li>
<li class=""><a data-toggle="tab" href="#property">属性</a></li>
</ul>
<div class="tab-content">
<div id="class" class="tab-pane active">
<div class="well well-small classDetail sign-left1">
<div class="extends">
Extends Component
</div>
<div class="foundat">
Defined in: <a href="../files/src_LoadingList.js.html#l10"><code>src/LoadingList.js:10</code></a>
</div>
Module: <a href="../modules/操作类组件.html">操作类组件</a>
<p>Available since 1.6.0</p>
</div>
<div class="constructor">
<h2>Constructor</h2>
<div id="method_LoadingList" class="method item">
<h3 class="name">LoadingList</h3>
<code>
LoadingList
<span class="paren">()</span>
</code>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_LoadingList.js.html#l10"><code>src/LoadingList.js:10</code></a>
</p>
<p>Available since 1.6.0</p>
</div>
<div class="description well well-small sign-left3">
</div>
<div class="example app-example">
<h4>Example:</h4>
<ul class="nav nav-tabs example-list">
<li role="presentation" class="active" data-demo="https://future-team.github.io/phoenix-ui/examples/index.html#/LoadingList" _no='0'> <a>展示</a></li>
</ul>
<div class="example-content showdemo ">
<div class="stdoc-code"><pre class="code prettyprint"><code>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>
);
}
}</code></pre>
</div>
</div>
<div class="btn-method-box">
<button class="btn btn-info btn-viewDemo" type="button">查看示例</button>
<button class="btn btn-info btn-editDemo" type="button">编辑代码</button>
</div>
<div class="device"></div>
</div>
</div>
</div>
</div>
<div id="method" class="tab-pane">
<h2 class="off-left">方法</h2>
<div id="method_onLoading" class="method item">
<h3 class="name">onLoading</h3>
<code>
onLoading
<span class="paren">()</span>
</code>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_LoadingList.js.html#l83"><code>src/LoadingList.js:83</code></a>
</p>
</div>
<div class="description well well-small sign-left3">
<div class="stdoc-code"><p>点击按钮加载或滑到底部自动加载的回调函数，用户在该函数内自定义请求</p>
</div>
</div>
</div>
<div id="method_onLoadingEnd" class="method item">
<h3 class="name">onLoadingEnd</h3>
<code>
onLoadingEnd
<span class="paren">()</span>
</code>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_LoadingList.js.html#l90"><code>src/LoadingList.js:90</code></a>
</p>
</div>
<div class="description well well-small sign-left3">
<div class="stdoc-code"><p>每次加载结束的回调函数</p>
</div>
</div>
</div>
</div>
<div id="property" class="tab-pane">
<h2 class="off-left">属性</h2>
<div id="property_buttonStyles" class="property item">
<h3 class="name"><code>buttonStyles</code></h3>
<span class="type">Array</span>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_LoadingList.js.html#l76"><code>src/LoadingList.js:76</code></a>
</p>
</div>
<div class="description">
<div class="stdoc-code"><p>加载5个状态的style，默认["primary","info","success","error","gray"]</p>
</div>
</div>
<p><strong>Default:</strong></p>
<code> ["primary","info","success","error","gray"]</code>
</div>
<div id="property_classPrefix" class="property item">
<h3 class="name"><code>classPrefix</code></h3>
<span class="type">String</span>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_LoadingList.js.html#l48"><code>src/LoadingList.js:48</code></a>
</p>
</div>
<div class="description">
<div class="stdoc-code"><p>样式前缀</p>
</div>
</div>
<p><strong>Default:</strong></p>
<code> 'loading-list'</code>
</div>
<div id="property_loadingStatus" class="property item">
<h3 class="name"><code>loadingStatus</code></h3>
<span class="type">Number</span>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_LoadingList.js.html#l62"><code>src/LoadingList.js:62</code></a>
</p>
</div>
<div class="description">
<div class="stdoc-code"><p>加载状态：0加载更多, 1加载中, 2数据加载成功, 3数据加载失败, 4没有更多</p>
</div>
</div>
<p><strong>Default:</strong></p>
<code> 1</code>
</div>
<div id="property_loadTips" class="property item">
<h3 class="name"><code>loadTips</code></h3>
<span class="type">Array</span>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_LoadingList.js.html#l69"><code>src/LoadingList.js:69</code></a>
</p>
</div>
<div class="description">
<div class="stdoc-code"><p>加载5个状态的文字描述，默认["加载更多","加载中","加载成功","加载失败","没有更多"]</p>
</div>
</div>
<p><strong>Default:</strong></p>
<code> ["加载更多","加载中","加载成功","加载失败","没有更多"]</code>
</div>
<div id="property_phStyle" class="property item">
<h3 class="name"><code>phStyle</code></h3>
<span class="type">String</span>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_LoadingList.js.html#l55"><code>src/LoadingList.js:55</code></a>
</p>
</div>
<div class="description">
<div class="stdoc-code"><p>加载更多的模式，可选[button,auto], 默认auto</p>
</div>
</div>
<p><strong>Default:</strong></p>
<code> 'auto'</code>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a id="gotoTop" class='well well-small' href='#'>
</a>
<script src="../assets/vendor/jquery/jquery-1.8.2.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.js"></script>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script src="../assets/js/config.js"></script>
<script src="../assets/js/doc.js"></script>
</body>
</html>