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

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

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

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

页面部分代码

    
        
			{{tabBarList[index].pagePath}}
		
		
			

				
			
			

				
			
			

				
			
			

				
			
			

				
			
		
	

 

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;
}

 

实现效果