Timeago 多久之前

用于将时间转化成类似于* 时间前的描述文字。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Timeago",
  3. "usingComponents": {
  4. "wux-segmented-control": "../../dist/segmented-control/index",
  5. "wux-timeago": "../../dist/timeago/index"
  6. }
  7. }

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Timeago</view>
  4. <view class="page__desc">多久之前</view>
  5. </view>
  6. <view class="page__bd page__bd_spacing">
  7. <wux-segmented-control values="{{ ['zh_CN', 'zh_TW', 'en'] }}" bind:change="onChange" />
  8. <view class="sub-title">Default</view>
  9. <wux-timeago to="{{ to }}" lang="{{ lang }}" />
  10. <view class="sub-title">Refreshable</view>
  11. <wux-timeago to="{{ to }}" lang="{{ lang }}" refreshable />
  12. <view class="sub-title">From</view>
  13. <wux-timeago to="2018-12-12" from="2019-01-01" lang="{{ lang }}" />
  14. <view class="sub-title">Timein</view>
  15. <wux-timeago to="2020-10-24" lang="{{ lang }}" />
  16. </view>
  17. </view>
  1. Page({
  2. data: {
  3. to: null,
  4. lang: 'zh_CN',
  5. },
  6. onLoad() {
  7. this.setData({
  8. to: new Date().getTime(),
  9. })
  10. },
  11. onChange(e) {
  12. console.log(e)
  13. const { key, values } = e.detail
  14. const lang = values[key]
  15. this.setData({
  16. lang,
  17. })
  18. },
  19. })

视频演示

Timeago

API

Timeago props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-timeago
to any 当前开始时间 -
from any 当前截止时间,不传默认当前时间 -
refreshable boolean 是否刷新时间 false
lang string 返回文本的语言,可选值为 en、zh_CN、zh_TW zh_CN

Timeago externalClasses

名称 描述
wux-class 根节点样式类