uniapp:tabBar点击后设置动画效果

APP端不支持dom操作,也不支持active伪类,绞尽脑汁也没办法给uniapp原生的tabBar点击加动画效果,所以最终只能舍弃原生tabBar,改用自定义tabBar。

自定义tabBar的原理是,页面的上部分分别是tabBar对应的页面组件,下部分是固定在底部的tabBar,通过点击tabBar获取到当前索引,然后通过v-if来判断显示哪个页面组件,跟原生tabBar不同的是,这里仅用一个page,所以在pages.json里只需要注册index页面即可,在router里也只需要设置index即可,同时也要注意,其他页面组件并不是一个页面,所以没有onShow,onLoad等方法,可以通过computed和watch来达到类似效果。

index页面的完整代码:

html 复制代码
<template>
	<view>
		<home v-if="PageCur=='home'" />
		<orders v-if="PageCur=='orders'" />
		<messages v-if="PageCur=='messages'" />
		<find v-if="PageCur=='find'" />
		<my v-if="PageCur=='my'" :userInfo="userInfo"/>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="cu-bar tabbar bg-white shadow foot">
				<view :class="PageCur=='home'?activeColor:defaultColor" @click="NavChange" data-cur="home">
					<view class='cuIcon-homefill' :class="PageCur=='home'?'animation-bounce':''"></view>主页
				</view>
				<view :class="PageCur=='orders'?activeColor:defaultColor" @click="NavChange" data-cur="orders">
					<view class='cuIcon-formfill' :class="PageCur=='orders'?'animation-bounce':''"></view>订单
				</view>
				<view :class="PageCur=='messages'?activeColor:defaultColor" @click="NavChange" data-cur="messages">
					<view class='cuIcon-commentfill' :class="PageCur=='messages'?'animation-bounce':''"></view>消息
				</view>
				<view :class="PageCur=='find'?activeColor:defaultColor" @click="NavChange" data-cur="find">
					<view class='cuIcon-explorefill' :class="PageCur=='find'?'animation-bounce':''"></view>发现
				</view>
				<view :class="PageCur=='my'?activeColor:defaultColor" @click="NavChange" data-cur="my">
					<view class='cuIcon-myfill' :class="PageCur=='my'?'animation-bounce':''"></view>我的
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { USER_INFO } from "@/common/util/constants"
	export default {
		data() {
			return {
				defaultColor: 'action text-gray',
				activeColor: 'action text-red',
				PageCur: 'home',
				userInfo: {},
				
			};
		},
	onLoad: function() {
			this.PageCur = 'home';
			this.userInfo = uni.getStorageSync(USER_INFO);
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur;

			}

		}
	}
</script>

<style scoped lang="scss">

</style>

在view的data-cur属性里设置每个tab的key,通过点击事件可以获取这个key,比如当key等于home时,通过动态类设置被选中的颜色,同理,给icon设置一个animation-bounce类,这个类是控制动画效果的,已经提前写在一个animation.css文件里了,这种动画效果的css文件网上很多,可以自己找一下,icon会被放大1.4倍,然后恢复。

html 复制代码
@-webkit-keyframes bounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}

最终效果:

参考文章:uniApp混合开发小程序实现自定义底部tab仿绿洲APP动画效果_uniapp的tabbar图标变化可以动画吗_湫沐椿风的博客-CSDN博客

相关推荐
江城开朗的豌豆3 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼12 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子14 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆15 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了15 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆21 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆21 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆22 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆23 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er29 分钟前
【前端工程化】前端组件模版构建那些事
前端