mp-colorui
Version:
MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）
67 lines • 2.4 kB
JavaScript
import Nerv from "nervjs";
import { Image, Text, View } from '@tarojs/components';
import { Component } from "@tarojs/taro-h5";
import { BG_COLOR_LIST } from "../utils/model";
let timer;
export default class ClLoading extends Component {
constructor() {
super(...arguments);
this.state = {
loadProgress: 0
};
}
loadProgress() {
this.setState({
loadProgress: this.state.loadProgress + 3
});
if (this.state.loadProgress < 100) {
timer = setTimeout(this.loadProgress.bind(this), 100);
} else {
this.setState({
loadProgress: 100
});
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.show) this.loadProgress();else {
clearTimeout(timer);
this.setState({
loadProgress: 0
});
}
}
componentDidMount() {
if (this.props.show) this.loadProgress();
}
render() {
const bgColorClassName = () => this.props.bgColor ? BG_COLOR_LIST[this.props.bgColor] : 'bg-blue';
const modalComponent = <View className="cu-load load-modal">
<Image src={this.props.imgUrl || ''} mode="aspectFit" />
<Text className="text-gray">{this.props.modalText}</Text>
</View>;
const imageComponent = <View className="cu-load load-image">
<Image src={this.props.imgUrl || ''} mode="aspectFit" />
</View>;
const lineComponent = <View className={`cu-load ${this.props.loadingError ? 'bg-red erro' : bgColorClassName()} ${this.props.noMore || this.props.loadingError ? 'over' : 'loading'}`} />;
const long = 100 - this.state.loadProgress;
const barComponent = <View className={`load-progress ${this.props.show ? 'show' : 'hide'}`} style={{ top: '0' }}>
<View className={`load-progress-bar ${bgColorClassName()}`} style={{
transform: `translate3d(-${long}%, 0px, 0px)`
}} />
<View className={`load-progress-spinner text-${this.props.bgColor}`} />
</View>;
const show = this.props.show;
return show ? this.props.type === 'bar' ? barComponent : this.props.type === 'line' ? lineComponent : this.props.type === 'modal' ? modalComponent : this.props.type === 'image' ? imageComponent : barComponent : <View />;
}
}
ClLoading.options = {
addGlobalClass: true
};
ClLoading.defaultProps = {
type: 'bar',
bgColor: 'blue',
modalText: '加载中...',
loadingError: false,
noMore: false,
show: false
};