How to set the date function of the navigation bar in uniApp

In uniApp, we often use the navigation bar as the menu bar at the top of the page to display page information, and through the component library provided by the uni-app framework, developers can easily customize the navigation bar to meet Different business needs. In some scenarios, we need to add the current date to the navigation bar. Here is how to set the date of the navigation bar in uniApp.

1. Understand the navigation bar component

In uniApp, the navigation bar component is a commonly used component, and its structure is as follows:

<view>
   <!--顶部导航条-->
   <navbar title="标题">
     <!--自定义导航栏-->
     <view class="right-area">
       <view class="iconfont icon-fenxiang"></view>
     </view>
   </navbar>
   <!--页面内容-->
   <view class="content"></view>
</view>

The navigation bar includes A navbar tag and a title attribute. The title attribute can be used to set the title text in the middle of the navigation bar. Inside the navbar tag, we can customize the navigation bar, such as adding a back button, search box, etc.

2. Add date to the navigation bar

Adding date to the navigation bar can be achieved in two ways.

Method 1: Use Vue’s calculated properties

In Vue, the function of calculated properties is provided. We can use calculated properties to obtain the corresponding date based on the current time and display it. in the navigation bar. The specific operation steps are as follows:

(1) Define a date attribute in data to save the current date.

data(){
    return{
        date:''
    }
}

(2) Get the date in the calculated attribute and assign it to the date attribute

computed:{
    getDate(){
        let date=new Date();
        let year=date.getFullYear();
        let month=date.getMonth()+1;
        let day=date.getDate();
        return `${year}-${this.addZero(month)}-${this.addZero(day)}`;
    }
}

In the getDate calculated attribute, we Use the ES6 template string function to concatenate the obtained current year, month, and day into a date string.

(3) In order to ensure that the format of the month and date is consistent, you need to add a addZero method.

methods:{
    addZero(num){
        return num<10?&#39;0&#39;+num:num;
    }
}

(4) Assign the value in the calculated attribute to the date attribute

watch:{
    getDate(newVal){
        this.date=newVal;
    }
}

(5) Add the date attribute to the navigation bar, And bind it to the date property.

<navbar title="标题" date="{{date}}"></navbar>

At this point, you can see the current date displayed in the navigation bar.

Method 2: Use third-party libraries

In UniApp, some third-party libraries are also provided to facilitate developers to quickly achieve page effects. In this scenario, we can usedayjs to get the current date and add it to the navigation bar.

(1) Introduce the dayjs library in the script tag

import dayjs from 'dayjs';

(2) Get the current date

let date=dayjs().format('YYYY-MM-DD');

in # In ##dayjs, the current date is formatted into the form of "year-month-day" through the format method.

(3) Add the date to the navigation bar

<navbar title="标题" date="{{date}}"></navbar>

In this way, you can set the date of the navigation bar in UniApp.

Summary:

Through the above two methods, we can easily set the date of the navigation bar in UniApp. For the functional optimization of the navigation bar in daily development, or the handling of other problems, we still need to continue to accumulate experience in implementation, demonstrate and gradually improve our technical level.

The above is the detailed content of How to set the date function of the navigation bar in uniApp. For more information, please follow other related articles on the PHP Chinese website!