112 lines
2.1 KiB
Vue
112 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="tabbar" :style="'margin-bottom:'+safety+'px'">
|
||
|
|
<view class="tabbar_content fx">
|
||
|
|
<view v-for="(item,index) in tableList" :key="index" @click="tableClick(index)" class="tabbar_item f1">
|
||
|
|
<image v-if="tableIndex==index"
|
||
|
|
:src="'/static/images/tables/tab'+(index+1)+'a.png'"
|
||
|
|
class="tabbar_icon"></image>
|
||
|
|
<image v-else :src="'/static/images/tables/tab'+(index+1)+'.png'"
|
||
|
|
class="tabbar_icon"></image>
|
||
|
|
<view class="tabbar_title" :class="tableIndex==index?'tabbar_active':''">
|
||
|
|
{{item.label}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tableList: [{
|
||
|
|
label: '聊天',
|
||
|
|
link: 'pages/index/index'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '好友',
|
||
|
|
link: 'pages/friends/index',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '我的',
|
||
|
|
link: 'pages/mine/index',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
tableIndex: 0,
|
||
|
|
safety: uni.getWindowInfo().safeAreaInsets.bottom || 10
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getCurrentPageUrl()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getCurrentPageUrl() {
|
||
|
|
const pages = getCurrentPages();
|
||
|
|
const currentPage = pages[pages.length - 1];
|
||
|
|
const url = currentPage.route;
|
||
|
|
|
||
|
|
for (let i = 0; i < this.tableList.length; i++) {
|
||
|
|
if (this.tableList[i].link == url) {
|
||
|
|
this.tableIndex = i
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tableClick(e) {
|
||
|
|
uni.reLaunch({
|
||
|
|
url: '/' + this.tableList[e].link
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.tabbar {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
padding: 0 50rpx;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabbar_content {
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 64rpx;
|
||
|
|
box-shadow: 0rpx 0rpx 16rpx #0000000a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabbar_item {
|
||
|
|
position: relative;
|
||
|
|
padding: 22rpx 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabbar_icon {
|
||
|
|
width: 48rpx;
|
||
|
|
height: 48rpx;
|
||
|
|
display: block;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.tabbar_item:nth-child(2) .tabbar_icon {
|
||
|
|
width: 60rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabbar_title {
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #9DB2CE;
|
||
|
|
line-height: 28rpx;
|
||
|
|
text-align: center;
|
||
|
|
margin: 24rpx 0 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabbar_active {
|
||
|
|
color: #9DB2CE;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
</style>
|