vue实现点击按钮控制可滑动的导航栏

实现效果：点击左箭头导航栏向左移动，点击右按钮导航栏向右移动

 

实现方式：在写好的导航中为左按钮和右按钮绑定两个函数`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>