rax-countdown

rax-countdown

支持

Web / Weex / 阿里小程序 / 字节跳动小程序

描述

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

安装

$ 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 DU from 'driver-universal';

class App extends Component {
  onComplete() {
    console.log('countdown complete');
  }
  render() {
    return (
      <View style={styles.root}>
        <View style={styles.container}>
          <Countdown
            timeRemaining={100000}
            tpl={'{d}天{h}时{m}分{s}秒'}
            onComplete={this.onComplete}
          />
        </View>
        <View style={styles.container}>
          <Countdown
            timeRemaining={100000000}
            timeStyle={{
              'color': '#007457',
              'backgroundColor': 'red',
              'marginLeft': '2rpx',
              'marginRight': '2rpx'
            }}
            secondStyle={{'backgroundColor': 'yellow'}}
            textStyle={{'backgroundColor': 'blue'}}
            tpl={'{d}-{h}-{m}-{s}'}
            onComplete={this.onComplete}
          />
        </View>
        <View style={styles.container}>
          <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 style={styles.container}>
          <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>
    );
  }
}

let styles = {
  root: {
    width: 750,
    paddingTop: 20
  },
  container: {
    padding: 20,
    borderStyle: 'solid',
    borderColor: '#dddddd',
    borderWidth: 1,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 10,
  },
};

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