187 lines
4.0 KiB
Vue
187 lines
4.0 KiB
Vue
<template>
|
||
<view>
|
||
<view class="nav">
|
||
<block v-for="(item,index) in tabbar">
|
||
<view class="nav-item" v-if="!item.midButton" :key="index" @click="jumpTo(item, index)">
|
||
<image
|
||
:src="current === index ? item.selectedIconPath :item.iconPath"
|
||
class="icon" mode="" :class="current === index ? 'bounceIn':''">
|
||
</image>
|
||
<text class="name" :style="{ color: current === index ? item.activeColor : item.inactiveColor}">{{item.name}}</text>
|
||
<!-- <text class="name" :class="{active: current === index}">{{item.name}}</text> -->
|
||
</view>
|
||
<view class="nav-item" @click="jumpTo(item, index)" v-if="false">
|
||
<image :src="item.iconPath" class="midButton" mode=""></image>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="nav-height"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let userInfo = uni.getStorageSync('userInfo');
|
||
export default {
|
||
name:"tabbar",
|
||
data() {
|
||
return {
|
||
current: 0,
|
||
tabPages: [
|
||
{
|
||
name: '首页',
|
||
url: '/pages/home/index',
|
||
iconPath: '/static/tabber/home.png',
|
||
selectedIconPath: '/static/tabber/home-use.png',
|
||
activeColor: '#22bd5e',
|
||
inactiveColor: '#333333'
|
||
},
|
||
{
|
||
name: '我的',
|
||
url: '/pages/user/index',
|
||
iconPath: '/static/tabber/my.png',
|
||
selectedIconPath: '/static/tabber/my-use.png',
|
||
activeColor: '#22bd5e',
|
||
inactiveColor: '#333333'
|
||
}
|
||
]
|
||
};
|
||
},
|
||
mounted(){
|
||
let routes = getCurrentPages();
|
||
let curRoute = routes[routes.length - 1].route
|
||
this.tabbar.map((item, index) => {
|
||
if (item.url.indexOf(curRoute) > -1) {
|
||
this.current = index;
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
jumpTo(row, index) {
|
||
return
|
||
if (this.current === index) return;
|
||
// 点击中间按钮的时候不改变current，因为进入视频后返回应该是停留在进入前的页面
|
||
if (index !== 2) {
|
||
this.current = index;
|
||
}
|
||
if (row.midButton) {
|
||
uni.navigateTo({
|
||
url: row.url
|
||
})
|
||
} else {
|
||
console.log(row)
|
||
uni.reLaunch({
|
||
url: row.url
|
||
})
|
||
}
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@-webkit-keyframes bounceIn {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: scale(.3);
|
||
transform: scale(.3)
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
-webkit-transform: scale(1.05);
|
||
transform: scale(1.05)
|
||
}
|
||
|
||
70% {
|
||
-webkit-transform: scale(.9);
|
||
transform: scale(.9)
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform: scale(1);
|
||
transform: scale(1)
|
||
}
|
||
}
|
||
|
||
@keyframes bounceIn {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform: scale(.3);
|
||
-ms-transform: scale(.3);
|
||
transform: scale(.3)
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
-webkit-transform: scale(1.05);
|
||
-ms-transform: scale(1.05);
|
||
transform: scale(1.05)
|
||
}
|
||
|
||
70% {
|
||
-webkit-transform: scale(.9);
|
||
-ms-transform: scale(.9);
|
||
transform: scale(.9)
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform: scale(1);
|
||
-ms-transform: scale(1);
|
||
transform: scale(1)
|
||
}
|
||
}
|
||
|
||
.bounceIn {
|
||
-webkit-animation-name: bounceIn;
|
||
animation-name: bounceIn
|
||
}
|
||
$height: 98rpx;
|
||
.nav-height{
|
||
background-color: #f2f2f2;
|
||
height: $height + 2rpx;
|
||
}
|
||
.nav{
|
||
height: $height;
|
||
display: flex;
|
||
align-items: center;
|
||
// justify-content: space-around;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
border-top: 2rpx solid #eee;
|
||
background: white;
|
||
&-item{
|
||
// #ifndef APP-PLUS
|
||
width: 25%;
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
width: 50%;
|
||
// #endif
|
||
display: flex;
|
||
flex-direction: column;
|
||
// align-items: center;
|
||
justify-content: center;
|
||
.icon{
|
||
display: block;
|
||
margin-bottom: 6rpx;
|
||
width: 78rpx;
|
||
height: 88rpx;
|
||
}
|
||
.name{
|
||
color: #a0a1a2;
|
||
font-size: 24rpx;
|
||
&.active{
|
||
color: rgb(248, 210, 71);
|
||
}
|
||
}
|
||
}
|
||
.midButton{
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
margin-top: -40rpx;
|
||
}
|
||
}
|
||
</style> |