gfs-loadingbar v1.0.1

gfs-loadingbar

状态加载

安装

	npm instsall gfs-loadingbar --save

使用

组件提供了多种loadingbar呈现方式，包括

• MaskBar 类似蒙层在页面中剧中展示加载状态效果，加载状态内容可自定义文字、图片均可

• LoadingBar 仿YouTube页面加载状态效果

	//引入loadingbar
	import {LoadingBar,MaskBar} from 'gfs-loadingbar'

	//初次使用需实例化loadingbar
	let loadingbar = new LoadingBar()

	//显示和隐藏loadingbar状态
	loadingbar.run()
	loadingbar.end()

React调用方式

与原生方式不同的是，此方式提供了redux middleware中间件、store状态机；并且能够与gfs-fetch、gfs-redux-bind-react配合使用；具体请参考例子：react-redux的使用方式

例子

• react+redux的使用方式

	//redux-react
	
	import React, { Component } from 'react'
	import ReactDom from 'react-dom'

	import LoadingBarComponent,{LoadingBar} from 'gfs-loadingbar/lib/react/LoadingBar'
	import {fetching} from 'gfs-loadingbar/lib/react/fetching'
	import {Connect} from 'gfs-loadingbar/lib/react/Connect'
	import FetchMiddleware from 'gfs-loadingbar/lib/react/FetchMiddleware'

	//或者这样

	//import {LoadingBarComponent,fetching,FetchMiddleware,LoadingBar,Connect} from 'gfs-loadingbar/lib/index.react';

	import { Provider,connect } from 'react-redux'
	import { createStore,applyMiddleware,combineReducers } from 'redux'


	//loadingbar实例，且页面中只能有一个
	let loadingbar = new LoadingBar()

	//action
	function fetchingAction(){
		
		//开始获取数据时显示loadingbar
		loadingbar.run()
		setTimeout( ()=>{
			//数据请求完成关闭loadingbar
			loadingbar.end()
		},2000)
	}

	//将组建内部写好的store合并到redux store中，并将提供的中间件注册好
	let store = createStore(combineReducers({fetching:fetching}),applyMiddleware(FetchMiddleware) )

	class Page extends Component {
		constructor(props) {
			super(props)
			
			fetchingAction()
		}

		render() {
			
			return (
				<Provider store={store}>
					<div>
						<Connect>
							<LoadingBarComponent />
						</Connect>
					</div>
				</Provider>
			
			)
		}
	}

	export default function append(){
		window.onload = function(){
			let root = document.getElementById('root')
			if(root){
				ReactDom.render( <Page /> ,root)
			}
			
		}
	}
	

• 普通调用方式

	import {MaskBar,LoadingBar} from 'gfs-loadingbar'

	let $ = function() {
		return document.querySelectorAll(arguments[0])
	}

	let loadingBar = new LoadingBar()

	let maskBar = new MaskBar({
		text: '拼命加载中'
	})

	let timeout = null
	let masktimeout = null

	if ($('#j-loadingbar').length > 0) {
		$('#j-loadingbar')[0].onclick = function() {

			clearTimeout(timeout)
			//渲染loadingbar
			loadingBar.run()
			timeout = setTimeout(() => {
				//结束
				loadingBar.end()
			}, 4000)
		}
		$('#j-maskbar')[0].onclick = function() {
			clearTimeout(masktimeout)
			//渲染loadingbar
			maskBar.run()
			masktimeout = setTimeout(() => {
				//结束
				maskBar.end()
			}, 4000)
		}

	}

通用方法

• show()

• hide()

• run()

• end()

属性

text?:string;
fetching?:number;

Command

	#测试	
	npm run test	
	#打包	
	npm run build	
	#例子演示	
	npm start