138 lines
3.1 KiB
Vue
138 lines
3.1 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: "#858C9A",
|
|
selected:0,
|
|
selectedColor: "#F3C368",
|
|
list: [
|
|
{
|
|
"pagePath": "/pages/index/index",
|
|
"text": "新闻动量",
|
|
"iconPath": "/static/icon/tabbar/home.png",
|
|
"selectedIconPath": "/static/icon/tabbar/home_s.png"
|
|
},
|
|
{
|
|
"pagePath": "/pages/concept/concept",
|
|
"text": "概念中心",
|
|
"iconPath": "/static/icon/tabbar/concept.png",
|
|
"selectedIconPath": "/static/icon/tabbar/concept_s.png"
|
|
},
|
|
{
|
|
"pagePath": "/pages/geGuCenter/geGuCenter",
|
|
"text": "个股中心",
|
|
"iconPath": "/static/icon/tabbar/gegu.png",
|
|
"selectedIconPath": "/static/icon/tabbar/gegu_s.png"
|
|
},
|
|
{
|
|
"pagePath": "/pages/ztfx/ztfx",
|
|
"text": "涨停分析",
|
|
"iconPath": "/static/icon/tabbar/zt.png",
|
|
"selectedIconPath": "/static/icon/tabbar/zt_s.png"
|
|
},
|
|
{
|
|
"pagePath": "/pages/mine/mine",
|
|
"text": "个人中心",
|
|
"iconPath": "/static/icon/tabbar/mine.png",
|
|
"selectedIconPath": "/static/icon/tabbar/mine_s.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: 110rpx;
|
|
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: 98;
|
|
.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> |