【大前端vue：组件】vue鼠标滑动：平滑滚动效果 向左、向右
<template><div class="tab-container"><div class="tab-wrapper"><h2 class="main-title">鼠标滑动：平滑滚动效果 向左、向右</h2><div class="tab-nav"><divv-for="(item, index) in tabList":key="index"class="tab-item":class="{ active: currentIndex === index }"@click="handleTabClick(index)">{{ item.name }}</div><!-- 滑动的下划线 --><divclass="sliding-line":style="{transform: `translateX(${currentIndex * 100}%)`,width: `${100 / tabList.length}%`,}"><div class="sliding-line-line"></div></div></div></div></div>
</template><script>
export default {name: "HuadongIndex",data() {return {currentIndex: 0,tabList: [{ name: "类型1", id: 1 },{ name: "类型2", id: 2 },{ name: "类型3", id: 3 },],};},methods: {handleTabClick(index) {this.currentIndex = index;},},
};
</script><style scoped>
.tab-container {width: 100%;background-color: #f5f9ff;padding: 40px 0;
}.tab-wrapper {width: 1200px;margin: 0 auto;background-color: #fff;padding: 30px;border-radius: 8px;display: flex;flex-direction: column;align-items: center;
}.main-title {text-align: center;font-size: 28px;color: #333;margin-bottom: 40px;
}.tab-nav {display: flex;justify-content: center;position: relative;padding-bottom: 2px;width: 900px;height: 50px;background: #ccc;align-items: center;
}.tab-item {position: relative;padding: 0 40px;height: 50px;font-size: 16px;color: #666;cursor: pointer;transition: color 0.3s;text-align: center;flex: 1;width: 200px;background: pink;border: 1px solid red;display: flex;align-items: center;justify-content: center;
}.tab-item.active {color: #1890ff;font-weight: 500;
}.sliding-line {position: absolute;bottom: -2px;left: 0;height: 2px;/* background-color: #1890ff; */transition: transform 0.3s ease;border-radius: 1px;width: 100px;display: flex;align-items: center;justify-content: center;
}
.sliding-line-line {height: 2px;width: 221px;background-color: red;
}/* 鼠标悬停效果 */
.tab-item:hover {color: #1890ff;
}
</style>```