uniapp微信小程序导航栏切换动画

最新推荐文章于 2025-04-16 17:52:24 发布

走出半生的少年

最新推荐文章于 2025-04-16 17:52:24 发布

阅读量1k

点赞数

分类专栏：微信小程序 uniapp vue 文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/m0_55258023/article/details/129280783

版权

文章讲述了在开发过程中如何在uniapp中创建一个带有动画效果的导航栏切换组件。通过使用Vue的v-for指令和事件监听，结合样式动态改变实现文字选中颜色变化和下划线平移的动画。代码示例展示了如何在不同平台（如微信小程序、H5）上进行适应性修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发的时候做导航栏切换。很正常的事情。但有时候为了我们的产品更加的完美会去要求我们前端在做导航栏切换的时候的动画效果。
如下：

具体效果大家可以自己复制代码之后看

因为我做的是一个组件并且是用uniapp做的所有大家在自己的uniapp里面创建一个vue文件然后粘贴进去就好了。
如果自己做的是微信小程序原生开发或者是H5 或者做后台管理的

要用大家复制一下根据自己需求去修改就好了

<template>
	<view class="team-pact">
		<view :style="{color:pitchon==item?'#444':'#999'}" class="segmented-item" :key="index"
			v-for="(item,index) in titleList" :id="'iconBox'+index">
			<view class="cont-box">
				<text @click="itemClick(item,index)" :class="pitchon==item?'subcolor':''">{
  {item}}</text>
			</view>