写在前面：

最近在写一个医院信息系统的项目，需要一个日历导航栏，但是搜了一圈都没有现成的组件，所以就写了一个分享给大家，教程如下

实现效果：

设计思路：

第一步：

首先肯定需要获取当前的时间，所以封装一个getWeektime函数，获取系统当前的日期，解析为周日月，并通过for循环获得最近八天的周日月，并且封装一个js对象，push到一个数组中，再把这个数组存到定义好的currentDate[]数组中,这样我们就得到了一个有最近八天年月日的数组

  getWeektime() {
            const dateArray = []
            for (let i = 0; i <= 8; i++) {
                let myDate = new Date()
                myDate.setDate(myDate.getDate() + i + 1)

                let weeks = ['日', '一', '二', '三', '四', '五', '六']
                let wk = myDate.getDay()
                let day = myDate.getDate()
                let month = myDate.getMonth() + 1

                let currentDate = {
                    day: day.toString(),
                    week: weeks[wk].toString(),
                    month: month.toString()
                }

                dateArray.push(currentDate)

            }
            console.log(dateArray)

            this.currentDate = dateArray
            console.log(this.currentDate)
            return dateArray
        },

第二步：

获得了近八天的周日月后，我们就可以着手设计导航栏了，布局采用flex布局，active类定义了一个 selectedIndex: 0,来实现，代码如下：

 <!-- 日期导航栏 -->
        <div class="tab">
            <div class="date_tab">
                <div class="left_button"><van-icon name="arrow-left" /></div>
                <div class="data_bar">
                    <div class="data_button" v-for="(date, dateIndex) in currentDate" :key="date.day"
                        @click="dateClick(dateIndex)">
                        <div class="week">{{ date.week }}</div>
                        <div :class="{ day_active: selectedIndex === dateIndex }" class="day">{{ date.day
                        }}
                            <span class="month">{{ date.month }}月</span>
                        </div>

                    </div>

                </div>
                <div class="right_button"><van-icon name="arrow" /></div>
            </div>
        </div>

dateClick(dateIndex) {
            this.selectedIndex = dateIndex
        },

 .tab {
        width: 375px;
        margin: 0 auto;

        max-height: 130px;
        overflow: hidden;
        background-color: #fff;

        // 日期导航栏
        .date_tab {
            display: flex;
            flex-direction: row;

            .left_button {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-content: center;
                text-align: center;
                color: gray;
                width: 50px;
            }

            .right_button {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-content: center;
                text-align: center;
                color: gray;
                width: 50px;

            }

            .data_bar {
                display: flex;
                flex-direction: row;
                width: 286px;
                height: 90px;
                overflow-x: auto;
                // background-color: pink;

                .data_button {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-content: center;
                    text-align: center;
                    flex-shrink: 0;
                    width: 50px;
                    height: 80px;
                    // border: 1px solid gray;
                    font-size: 12px;


                    .week {
                        display: flex;
                        flex-direction: column;
                        align-content: center;
                        justify-content: center;
                        width: 50px;
                        height: 40px;
                    }

                    .day {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-content: center;
                        width: 40px;
                        height: 40px;
                        margin: 0 auto;
                        border-radius: 5px;
                        // line-height: 40px;
                        background-color: rgb(246, 247, 249);



                        .month {
                            margin-top: 0;
                        }
                    }
                }
            }
        }
    }