实现效果：点击左箭头导航栏向左移动，点击右按钮导航栏向右移动
实现方式：在写好的导航中为左按钮和右按钮绑定两个函数`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>
