167 lines
3.7 KiB
Vue
167 lines
3.7 KiB
Vue
<template>
|
|
<view
|
|
:style="{
|
|
'background-image': 'url(' + webUrl + '/home/tabbar-bg.png);'
|
|
}"
|
|
class="xdd-tabbar-wrap"
|
|
>
|
|
<view class="center-img" @click="switchTabFn('/pages/cloud/haveFun')">
|
|
<image
|
|
:src="webUrl + '/home/tabbar-center.png'"
|
|
class="img"
|
|
/>
|
|
</view>
|
|
<view class="tabbar-list">
|
|
<view
|
|
v-for="(tabbarItem, tabbarIndex) in tabbar"
|
|
:key="tabbarIndex"
|
|
class="tabbar-item"
|
|
>
|
|
<view
|
|
v-for="(item, index) in tabbarItem"
|
|
:key="index"
|
|
:class="currIndex === item.index ? 'curr' : ''"
|
|
class="item"
|
|
@click="gotoPage(item.url, item.type, item.index)"
|
|
>
|
|
<view class="img-wrap">
|
|
<image
|
|
:src="currIndex === item.index ? item.onIcon : item.offIcon"
|
|
class="img"
|
|
/>
|
|
</view>
|
|
<view class="name">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'XddTabbar',
|
|
props: {
|
|
currIndex: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
tabbar: [[
|
|
{
|
|
name: '首页',
|
|
onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-01-on.png',
|
|
offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-01-off.png',
|
|
url: '/pages/home/index',
|
|
type: 1,
|
|
index: 0
|
|
},
|
|
{
|
|
name: '消息',
|
|
onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-02-on.png',
|
|
offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-02-off.png',
|
|
url: '/pkg_common/views/roomLogs',
|
|
type: 2,
|
|
index: 1
|
|
}
|
|
],[
|
|
{
|
|
name: '购物车',
|
|
onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-03-on.png',
|
|
offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-03-off.png',
|
|
url: '/pages/cart',
|
|
type: 1,
|
|
index: 2
|
|
},
|
|
{
|
|
name: '我的',
|
|
onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-04-on.png',
|
|
offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-04-off.png',
|
|
url: '/pages/user/User/index',
|
|
type: 1,
|
|
index: 3
|
|
}
|
|
]]
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 跳转至目标页面
|
|
* type: 1-tabbar页面，2-非tabbar页面
|
|
*/
|
|
gotoPage(url, type = 1, index) {
|
|
if (this.currIndex === index) return
|
|
if (type === 1) {
|
|
this.switchTabFn(url)
|
|
}
|
|
if (type === 2) {
|
|
uni.navigateTo({ url })
|
|
}
|
|
},
|
|
switchTabFn(url) {
|
|
uni.switchTab({ url })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.xdd-tabbar-wrap {
|
|
position: fixed;
|
|
bottom: 21rpx;
|
|
left: 21rpx;
|
|
right: 21rpx;
|
|
z-index: 99;
|
|
height: 164rpx;
|
|
background-size: 708rpx 164rpx;
|
|
background-repeat: no-repeat;
|
|
.center-img {
|
|
position: absolute;
|
|
top: -16rpx;
|
|
left: 50%;
|
|
z-index: 5;
|
|
transform: translateX(-50%);
|
|
.img {
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
}
|
|
}
|
|
.tabbar-list {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 70rpx 0 0 0;
|
|
.tabbar-item {
|
|
display: flex;
|
|
align-items: center;
|
|
width: calc(50% - 78rpx);
|
|
.img-wrap {
|
|
.img {
|
|
display: block;
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
.name {
|
|
padding: 10rpx 0 0 0;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #9a9a9a;
|
|
}
|
|
.item {
|
|
width: 140rpx;
|
|
&.curr {
|
|
.name {
|
|
color: #C52733;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|