1.0.3 • Published 5 years ago
nuke-biz-custom-loading v1.0.3
CustomLoading
- category: UI
- chinese: 加载中
- type: UI组件
何时使用
需要定制 toast 的文案、Icon 时
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
image | 图片,gif 版本 | {{uri:''},style:{}} | 无 |
onHide | 关闭时触发回调 | function | |
onShow | 打开后后触发回调 | function | false |
style | mask 样式 | object | {} |
animate | 是否开启渐显渐隐动画 | boolean | true |
demo
/** @jsx createElement */
import {createElement, Component,render } from 'rax';
import {View,Text,Page,Button} from 'weex-nuke';
import CustomLoading from 'nuke-biz-custom-loading';
let App = class NukeDemoIndex extends Component {
constructor() {
super();
this.closeHandler = this.closeHandler.bind(this);
this.showLoading = this.showLoading .bind(this);
}
showLoading(){
this.loading.wrappedInstance.show();
setTimeout(()=>{
this.loading.wrappedInstance.hide();
},2000);
}
closeHandler(){
console.log('toast closed');
}
render() {
return (
<Page title="custom-loading">
<Page.Intro main="basic" sub="basic-sub"/>
<Button onPress={this.showLoading} type="primary">点我</Button>
<CustomLoading
ref={(n)=>{this.loading = n;}}
image={{
uri:
'//img.alicdn.com/tfs/TB1uC0kgLDH8KJjy1XcXXcpdXXa-256-256.gif',
style: {
width: 90,
height: 90,
},
}}
style={{backgroundColor:'transparent'}}
onHide={this.closeHandler}
/>
</Page>
);
}
}
render(<App/>);
```