uniApp混合开发小程序实现自定义底部tab仿绿洲APP动画效果

今天在使用绿洲APP时感觉底部的切换效果不错，就想试着做一下，但是uniAPP官方的底部tab太过死板，那么要想实现绿洲APP的切换效果自然不能用官方的东西，那咋办嘞？像我这么爱折腾的人肯定是自己尝试着去写一个啦

说干就干，我们把页面分成两个部分，上面是内容区，下面是固定且浮在上层的tab区域

每当点击时获取当前tab的索引并根据索引切换内容区

页面部分代码

    <view class="content">
        <view class="tabCon">
			{{tabBarList[index].pagePath}}
		</view>
		<view class="tab">
			<div class="tabItem" @tap='swichTab(0)'>
				<image :src="index == 0 ? tabBarList[0].selectedIconPath : tabBarList[0].iconPath" :class="[istab == 0 ? 'tabImg acImg' : 'tabImg']"></image>
			</div>
			<div class="tabItem" @tap='swichTab(1)'>
				<image :src="index == 1 ? tabBarList[1].selectedIconPath : tabBarList[1].iconPath" :class="[istab == 1 ? 'tabImg acImg' : 'tabImg']"></image>
			</div>
			<div class="tabAdd" @tap='swichTab(2)'>
				<image :src="tabBarList[2].iconPath" class="addImg"></image>
			</div>
			<div class="tabItem" @tap='swichTab(3)'>
				<image :src="index == 3 ? tabBarList[3].selectedIconPath : tabBarList[3].iconPath" :class="[istab == 3 ? 'tabImg acImg' : 'tabImg']"></image>
			</div>
			<div class="tabItem" @tap='swichTab(4)'>
				<image :src="index == 4 ? tabBarList[4].selectedIconPath : tabBarList[4].iconPath" :class="[istab == 4 ? 'tabImg acImg' : 'tabImg']"></image>
			</div>
		</view>
	</view>

 

data中的内容

                index: 0,
				istab: 9,
				clicAble : true,
				tabBarList: [{
					"pagePath": "../home/home",
					"iconPath": "../../static/nav_bottom_home_normal.png",
					"selectedIconPath": "../../static/nav_bottom_home_hl.png",
				}, {
					"pagePath": "../discover/discover",
					"iconPath": "../../static/nav_bottom_discover_normal.png",
					"selectedIconPath": "../../static/nav_bottom_discover_hl.png",
				},{
					"pagePath": "../more/more",
					"iconPath": "../../static/nav_bottom_more_normal.png",
				},{
					"pagePath": "../message/message",
					"iconPath": "../../static/nav_bottom_message_normal.png",
					"selectedIconPath": "../../static/nav_bottom_message_hl.png",
				}, {
					"pagePath": "../mine/mine",
					"iconPath": "../../static/nav_bottom_mine_normal.png",
					"selectedIconPath": "../../static/nav_bottom_mine_hl.png",
				}],

css动画

.tabImg{
	width: 50upx;
	height: 50upx;
	position: relative;
	top: 31upx;
}

@-webkit-keyframes bounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}

.acImg{
	animation: bounce .3s;
}

 

实现效果