uniapp页面导航栏时间

UniApp 是一个使用 Vue.js 开发所有前端应用的框架，可以编译到 iOS、Android、H5、以及各种小程序等多个平台。在 UniApp 中实现页面导航栏上的时间显示，可以通过在页面的生命周期函数中获取当前时间，并在页面的模板中进行展示。

以下是一个简单的例子来说明如何在 UniApp 页面中显示时间：

1. 首先，在页面的 `onLoad` 生命周期钩子中获取当前时间：

export default {
  data() {
    return {
      currentTime: new Date()
    };
  },
  onLoad() {
    this.updateTime();
  },
  methods: {
    updateTime() {
      this.currentTime = new Date();
      // 使用uni.setInterval可以每秒更新时间
      this.timer = setInterval(() => {
        this.currentTime = new Date();
      }, 1000);
    }
  },
  onUnload() {
    // 页面销毁时清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};

2. 在页面的模板部分显示时间：

<template>
  <view>
    <text>当前时间：{{ currentTime | date('yyyy-MM-dd HH:mm:ss') }}</text>
  </view>
</template>

注意：UniApp 提供了过滤器 `date` 来格式化日期，所以在模板中使用 `date` 过滤器来将时间格式化为可读的字符串。

3. 如果需要导航栏直接显示时间，可以通过配置页面的 `navigationBarTitleText` 属性或者使用 `titleNView` 配置来设置导航栏标题为当前时间，但需要注意的是，这种方式需要在页面的 `onShow` 方法中更新时间，因为导航栏的标题内容通常是在页面显示时才进行设置。

onShow() {
  this.updateTime();
},

使用这种方法，可以在 UniApp 应用的页面上动态显示当前时间。