Question

描述

倒计时组件，可设置倒计时毫秒数，以及展现的模板。

安装

$ npm install rax-countdown --save

属性

属性	类型	默认值	必填	描述	支持
timeRemaining	Number	-	✔️	倒计时剩余时间,单位为"毫秒"
interval	Number	1000	✘	倒计时的间隔,单位为"毫秒"
tpl	String	{d}天{h}时{m}分{s}秒{ms}	✘	倒计时展示模板
formatFunc	Function	-	✘	自定义格式化剩余时间的方法,非undefined时tpl失效,处理剩余时间的展示
onTick	Function	-	✘	倒计时变化时调用的方法
onComplete	Function	-	✘	倒计时完成时调用的方法
timeStyle	Object	-	✘	数字第一位的样式
secondStyle	Object	-	✘	数字第二位的样式
textStyle	Object	-	✘	时间-单位的样式
timeWrapStyle	Object	-	✘	各时间区块的样式
timeBackground	Object	-	✘	各时间区块背景(可加背景图)
timeBackgroundStyle	Object	-	✘	各时间区块背景样式

注：基础属性、事件及图片含义见组件概述。

示例

import { createElement, render, Component } from 'rax';
import View from 'rax-view';
import Countdown from 'rax-countdown';
import DriverUniversal from 'driver-universal';

class App extends Component {
  onComplete() {
    console.log('countdown complete');
  }
  render() {
    return (
      <View>
        <View>
          <Countdown
            timeRemaining={100000}
            tpl={'{d}天{h}时{m}分{s}秒'}
            onComplete={this.onComplete}
          />
        </View>
        <View>
          <Countdown
            timeRemaining={100000000}
            timeStyle={{
              'color': '#007457',
              'backgroundColor': 'red',
              'marginLeft': '2rem',
              'marginRight': '2rem'
            }}
            secondStyle={{'backgroundColor': 'yellow'}}
            textStyle={{'backgroundColor': 'blue'}}
            tpl={'{d}-{h}-{m}-{s}'}
            onComplete={this.onComplete}
          />
        </View>
        <View>
          <Countdown
            timeRemaining={500000}
            tpl="{h}:{m}:{s}"
            timeStyle={{
              color: '#ffffff',
              fontSize: 40,
              position: 'relative'
            }}
            secondStyle={{
              color: '#ffffff',
              fontSize: 40,
              position: 'relative'
            }}
            timeWrapStyle={{
              borderRadius: 6,
              width: 50,
              height: 60,
              backgroundColor: '#333333',
            }}
          />
        </View>
        <View>
          <Countdown
            timeRemaining={500000}
            tpl="{h}:{m}:{s}"
            timeStyle={{
              color: '#ffffff',
              fontSize: 40,
              position: 'relative'
            }}
            secondStyle={{
              color: '#ffffff',
              fontSize: 40,
              position: 'relative'
            }}
            timeBackground={{
              uri: 'https://gw.alicdn.com/tfs/TB1g6AvPVXXXXa7XpXXXXXXXXXX-215-215.png'
            }}
            timeBackgroundStyle={{
              width: 50,
              height: 80
            }}
          />
        </View>
      </View>
    );
  }
}

render(<App />, document.body, { driver: DriverUniversal });