138 lines
3.2 KiB
Vue
138 lines
3.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="tab-bar">
|
|
<view v-for="(item,index) in list" :key="index" :class="'tab-bar-item '+(item.bulge?'bulge':'')" @click="item.jump=='nav'?navigateTo(item.pagePath,index):switchTab(item.pagePath,index)">
|
|
<image class="image" :src="selected == index ? item.selectedIconPath : item.iconPath" mode="aspectFit"></image>
|
|
<view v-if="item.text" class="tab-bar-view" :style="'color: '+(selected==index?selectedColor:color)+';'">{{item.text}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"tabbar",
|
|
data() {
|
|
return {
|
|
color: "#504E4E",
|
|
selected:0,
|
|
selectedColor: "#504E4E",
|
|
list: [
|
|
{
|
|
pagePath: "/pages/index/index",
|
|
text: "首页",
|
|
iconPath: "/static/icon/tabbar/home.png",
|
|
selectedIconPath: "/static/icon/tabbar/home.png"
|
|
},
|
|
{
|
|
pagePath: "/pages/classify/classify",
|
|
text: "分类",
|
|
iconPath: "/static/icon/tabbar/classify.png",
|
|
selectedIconPath: "/static/icon/tabbar/classify.png"
|
|
},
|
|
// {
|
|
// pagePath: "/pages/shoppingCart/shoppingCart",
|
|
// text: "购物车",
|
|
// iconPath: "/static/icon/tabbar/shoppingCart.png",
|
|
// selectedIconPath: "/static/icon/tabbar/shoppingCart.png"
|
|
// },
|
|
// {
|
|
// pagePath: "/pages/sharedRespository/sharedRespository",
|
|
// text: "共享仓",
|
|
// iconPath: "/static/icon/tabbar/sharedRespository.png",
|
|
// selectedIconPath: "/static/icon/tabbar/sharedRespository.png"
|
|
// },
|
|
{
|
|
pagePath: "/pages/mine/mine",
|
|
text: "我的",
|
|
iconPath: "/static/icon/tabbar/mine.png",
|
|
selectedIconPath: "/static/icon/tabbar/mine.png"
|
|
}
|
|
]
|
|
};
|
|
},
|
|
props:{
|
|
current:Number
|
|
},
|
|
methods:{
|
|
switchTab(url,index) {
|
|
if(index==2||index==4)
|
|
{
|
|
//如果是购物车和我的，需要登录
|
|
let token = uni.getStorageSync('token')
|
|
if (!token) {
|
|
uni.navigateTo({
|
|
url:'/pages/login/login'
|
|
})
|
|
return
|
|
}
|
|
}
|
|
uni.switchTab({url})
|
|
},
|
|
navigateTo(url,index) {
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.tab-bar {
|
|
background-color: white;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 60px;
|
|
display: flex;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
box-sizing: content-box;
|
|
box-shadow: 0 0 5rpx 0 rgba(145,145,145,0.53);
|
|
z-index: 99;
|
|
.tab-bar-item
|
|
{
|
|
flex: 1;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
.image {
|
|
margin: 16rpx 0 8rpx 0;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.bulge
|
|
{
|
|
position: relative;
|
|
}
|
|
.bulge .image
|
|
{
|
|
position: absolute;
|
|
top: -47rpx;
|
|
width: 94rpx;
|
|
height: 94rpx;
|
|
}
|
|
.bulge .tab-bar-view
|
|
{
|
|
margin-top: 60rpx;
|
|
}
|
|
.tab-bar-item .tab-bar-view {
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
}
|
|
.tab-bar .bg
|
|
{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
z-index: -1;
|
|
}
|
|
</style> |