实现效果：

点击左箭头导航栏向左移动，点击右按钮导航栏向右移动

实现方式：

在写好的导航中为左按钮和右按钮绑定两个函数scrollLeft()和 scrollLeft(),接着实现逻辑，代码如下：

  // 按钮左右滑动

        scrollLeft() {
            const dataBar = document.querySelector('.data_bar');
            dataBar.scrollTo({
                left: dataBar.scrollLeft - dataBar.clientWidth,
                behavior: 'smooth'
            });
        },

        scrollRight() {
            const dataBar = document.querySelector('.data_bar');
            dataBar.scrollTo({
                left: dataBar.scrollLeft + dataBar.clientWidth,
                behavior: 'smooth'
            });
        }

实现逻辑：

当scrollLeft方法被调用时，它会获取到包含日期导航栏的容器元素.data_bar，然后使用scrollTo方法来设置容器的滚动位置。scrollTo方法接受一个对象作为参数，该对象包含要滚动到的位置和滚动行为的配置。

具体来说，scrollLeft方法中的代码会执行以下操作：

1. 使用document.querySelector('.data_bar')获取到包含日期导航栏的容器元素.data_bar。
2. 使用.scrollLeft属性获取当前容器的水平滚动位置。
3. 将dataBar.scrollLeft - dataBar.clientWidth作为滚动的目标位置，即将容器向左滚动一个可视宽度的距离。
4. 将behavior属性设为'smooth'，以使滚动具备平滑的过渡效果。

类似地，scrollRight方法执行的操作也类似，但是它是通过将.scrollLeft属性增加一个可视宽度的距离来将容器向右滚动。

使用scrollTo方法是通过调整元素的scrollLeft属性来实现滚动的。scrollLeft属性控制水平滚动的位置，通过改变它的值，你可以控制滚动的方向和距离。将scrollLeft属性设置为0会使容器滚动到最左侧，设置为容器宽度会使容器滚动到最右侧。

页面代码如下：

<!-- 日期导航栏 -->
        <div class="tab">
            <div class="date_tab">
                <div class="left_button" @click="scrollLeft"><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" @click="scrollRight"><van-icon name="arrow" /></div>
            </div>
        </div>