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 });