uniapp 分段器 文字下方颜色横柱 点击item下方颜色横柱怎么平滑过渡过去

### 实现 UniApp 分段器点击 Item 后文字下方颜色横柱平滑过渡动画效果 为了实现分段器的文字下方颜色横柱的平滑过渡动画效果，可以利用 Vue 的 `transition` 组件以及 CSS 动画来完成。以下是具体方法： #### HTML 结构设计 通过动态绑定类名或者样式属性，控制当前选中的项及其对应的下划线位置和宽度变化。 ```html <template> <view class="segment-container"> <!-- 分段器 --> <view class="segment-item" v-for="(item, index) in items" :key="index" @click="handleItemClick(index)"> {{ item }} <!-- 下划线 --> <view class="underline" :class="{ active: currentIndex === index }"></view> </view> <!-- 使用 transition 完成切换动画 --> <transition name="underline-transition"> <view class="active-line" :style="{ transform: 'translateX(' + currentTranslateX + '%)' }"></view> </transition> </view> </template> ``` #### 数据与逻辑处理 定义数据模型并设置点击事件处理器以更新状态。 ```javascript <script setup> import { ref, computed } from 'vue'; // 初始化数据 const items = ['选项一', '选项二', '选项三']; const currentIndex = ref(0); // 计算 translateX 值 const currentTranslateX = computed(() => { return (currentIndex.value / items.length) * 100; }); // 处理点击事件 function handleItemClick(index) { currentIndex.value = index; } </script> ``` #### 样式部分 使用 CSS 来定义基础布局、激活态样式以及过渡动画效果。 ```css <style scoped> .segment-container { display: flex; position: relative; } .segment-item { flex: 1; text-align: center; padding: 10px; cursor: pointer; position: relative; } /* 默认状态下隐藏 */ .active-line { height: 3px; background-color: blue; width: calc(100% / 3); position: absolute; bottom: 0; left: 0; transition: transform 0.3s ease-in-out; /* 添加平滑过渡效果 */ } /* 过渡动画名称 */ .underline-transition-enter-active, .underline-transition-leave-active { transition: opacity 0.5s; } .underline-transition-enter-from, .underline-transition-leave-to { opacity: 0; } </style> ``` 上述代码实现了基于 Vue 和 CSS 的分段器功能[^1]，其中包含了点击某个项目后触发的颜色横柱移动和平滑过渡的效果。 --- ####