uni

WAP站长网 2025-9-7 12:30

0 1

前情

不知道该说是公司对产品要求稿，还是公司喜欢作，最近接手公司的一个全新跨端（快抖微支+app）的项目，项目还没有上线就已经改了4版了，改改UI，换换皮也就算了，关键是流程也是在一直修改，最近就接到上层说这小程序UI太丑了，要重新出UI，说现在的UI只能打60分，希望UI能多玩出点花样来，于是就接到现在的需求了，UI希望实现展形Tabbar，根据不同页面主题色需要切换Tabbar的背景，还希望默认高亮选中的是Tabbar项的中间项，而且还希望实现一些icon切换动效，里面任何一条想实现都只能靠自定义 Tabbar来做了

心里虽有排斥，排斥的是修改太频率了，每次都是刚刚调通又来大调整，心态上多少有点浮动，但这就是工作吧，互相配合才能打造老板喜欢的好的产品，用户喜欢不喜欢只能靠市场验证了，我也就偷偷骂了二句娘就接着开发这一个需求了

自定义Tabbar

异常Tabbar，对于我来说不是什么大问题，因为我已经在插件市场分享了一个自定义Tabbar的组件，就是为了能快速应对这种需求，我发布在插件市场的组件地址是：https://ext.dcloud.net.cn/plugin?id=21094

我实现异形组件的关键代码如下

这是Tabbar的配置数据：

... tabbar: { color: '#8D8E91', selectedColor: '#000000', borderStyle: 'white', backgroundColor: 'transparent', tabbarHeight: 198, holderHeight: 198, iconStyle: { width: '44rpx', height: '44rpx' }, activeIconStyle: { width: '44rpx', height: '44rpx' }, textStyle: { fontSize: '24rpx' }, activeTextStyle: { fontSize: '24rpx' }, list: [ { pagePath: '/pages/discover/discover', iconPath: '/static/tabbarnew/fx.png', selectedIconPath: '/static/tabbarnew/fxactive.png', text: '发现', key: 'discover', }, { pagePath: '/pages/games/games', iconPath: '/static/tabbarnew/yx.png', selectedIconPath: '/static/tabbarnew/yxactive.png', text: '游戏', key: 'games', }, { pagePath: '/pages/index/index', iconPath: 'https://cdn.dianbayun.com/static/tabs/xwz.gif', selectedIconPath: 'https://cdn.dianbayun.com/static/tabs/xwzactive.gif', text: '新物种', key: 'index', }, { pagePath: '/pages/product/product', iconPath: '/static/tabbarnew/sc.png', selectedIconPath: '/static/tabbarnew/scactive.png', text: '商城', key: 'product', }, { pagePath: '/pages/my/my', iconPath: '/static/tabbarnew/wd.png', selectedIconPath: '/static/tabbarnew/wdactive.png', text: '我的', key: 'my', }, ], } ...

下面是导航栏组件的关键结构和一些为了实现icon切换动效的css：

<!-- CustomTabBar 组件关键代码 --> <hbxw-tabbar :config="globalInstance.tabbar" :active-key="activeKey" :tabbar-style="{ backgroundImage: bgType === 'black' ? 'url(\'黑色背景\')' : 'url(\'白色背景\')', backgroundSize: '100% auto' }" > <template #default="{ item, isActive, color, selectColor, iconStyleIn, activeIconStyleIn, textStyleIn, activeTextStyleIn }"> <view   v-if="item.key !== 'index'" > <view   :class="{'active': isActive}"> <image   :src="https://www.cnblogs.com/xwwin/p/item.iconPath" :  /> <image   :src="https://www.cnblogs.com/xwwin/p/item.selectedIconPath" :  /> </view> <text   :  > {{ item.text }} </text> </view> <view   v-else > <view   :class="{'active': isActive}"> <image   :src="https://www.cnblogs.com/xwwin/p/item.iconPath" /> <image   :src="https://www.cnblogs.com/xwwin/p/item.selectedIconPath" /> </view> </view> </template> </hbxw-tabbar> </template> // 这个是为了实现icon动添加的css <style lang="scss" scoped> @keyframes normalimg { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.3); } } @keyframes activeimg { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: scale(1); } } .active-img{ opacity: 0; transform: scale(.3); } .normal-img{ opacity: 1; transform: scale(1); } .active { .normal-img{ animation: normalimg 0.4s ease-in-out 0s forwards; } .active-img{ animation: activeimg 0.4s ease-in-out 0.4s forwards; } } </style>

注：当前项目我使用了Tainwind CSS原子化CSS框架来书写样式

在页面上使用的代码如下：

<!-- 这是首页的页面Tabbar 高亮index项，同时背景用黑色 --> <CustomTabBar activeKey="index" bgType="black" />

其实原理很简单，因为我的发布在应用市场的组件有提供 slot，你可以自由定义Tabbar的每一项的结构样式，我这里的做法就是中间项单独一块结构来实现异形效果，实现后的效果如下：

uni

坑位?

展开tabbar效果是好实现的，但是在实现Tabbar切换icon动效的时候，我遇到了麻烦，小程序虽然有提供专门用于做动画的API，但是我个人不太喜欢用，我比较喜欢使用css3实现动画，使用上更简单的同时，动画流畅度也优于JS来做

因为是切换动效，首先想到的就是通过transition来实现，通过给父组添加一个active的类名控制下面icon的来实现切换动效，这是实现状态变化动效的首选，但是发现完全没有用，一度怀疑是不是小程序不支持transition,于是想到换方案，我通过aniamtion来实现动效，确实是有效果的，但是只有首次切换tabbar的时候有效果

Why?

我一开始是怀疑是不是小程序对于css3动画有兼容性问题，或者是支付宝不支持动效，因为我此时正在开发的就是支付宝端，也去小程序论坛逛了逛，确实有一些帖子说到transition在小程序上兼容问题，也问了AI，AI也说是有，而且不现标签组件可能支持的transition还不一样，此时我陷入了怀疑，难道真的要靠JS来实现么，但是以我的个人开发经验，我不止在一个小程序项目中使用过css3来实现动效，都是没有问题的，在经过一段时间的思考我，我突然意识到一个问题，动画没出现真的不是兼容性的问题，而是没有动效或者只有首次有这根本就是正常现象

transition没有是因为当你切换tabbar的时候整个组件是重新渲染的，对于初次渲染的元素你是没法使用transition的，至于为什么后面点也都没有，是我在尝试 animation的时候发现它只有首次点击切换的时候才有我才突然意识到，因为这是tabbar啊，小程序是有会缓存的，你显示一次后，小程序页面会运行在后台，你再次切换的时候只是激活而已，根本不会有样式的变化

解决方案

既然Tabbar切换页在不会重新从0渲染，只是显示与隐藏而已，那我们就手动的让它来实现Tabbar的高亮样式切换即可，虽然Tabbar切换页面不会重新渲染，但是它会触发二个小程序的生命钩子onShow/onHide，那我们就从这二处着手，因为是多个页面要复用，我此处抽了hooks，关键代码如下：

import { onShow, onLoad, onHide } from '@dcloudio/uni-app' import { ref } from 'vue' export const usePageTabbar = (type) => { const activeType = ref('') onLoad(() => { uni.hideTabBar() activeType.value = type }) onShow(() => { activeType.value = type uni.hideTabBar() }) onHide(() => { activeType.value = '' uni.showTabBar() }) return { activeType } }

页面上使用也做了调整，关键代码如下：

<script setup> ... import { usePageTabbar } from '@/hooks/pagesTabbar' const { activeType } = usePageTabbar('index') ... </script> <template> ... <!-- 页面tabbar --> <CustomTabBar :activeKey="activeType" /> ... </template>

至此完成了这一次的 tabbar大改造，实现的效果如下：

uni