Vue3中使用transition过渡实现滑动切换效果

JackieDYH

于 2025-07-14 09:30:35 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

分类专栏：编码小技巧 Vue JavaScript 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/JackieDYH/article/details/131582811

编码小技巧同时被 3 个专栏收录

74 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

JavaScript

399 篇文章

订阅专栏

Vue

372 篇文章

订阅专栏

页面结构

<div class="slider-buttons">
  <div class="slider-btn" @click="checkBtn(1)">收益率</div>
  <div class="slider-btn" @click="checkBtn(2)">收益额</div>
  <div :class="['active-bg', { active: detailBtn == 2 }]"></div>
</div>

const detailBtn = ref(1);

样式处理

.slider-buttons {
display: flex;
justify-content: space-around;
align-items: center;
width: 180px;
height: 36px;
border-radius: 61px;
background: #f5f5f5;
position: relative;
.slider-btn {
  position: relative;
  z-index: 2;
  width: 90px;