今天在使用绿洲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;
}
实现效果