Home > Web Front-end > uni-app > How to set the date function of the navigation bar in uniApp

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

PHPz
Release: 2023-04-18 18:27:37
Original
1155 people have browsed it

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>
Copy after login

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.

  1. 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:''
    }
}
Copy after login

(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)}`;
    }
}
Copy after login

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;
    }
}
Copy after login

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

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

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

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

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';
Copy after login

(2) Get the current date

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

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>
Copy after login
Copy after login
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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template