You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
1.8 KiB
91 lines
1.8 KiB
10 months ago
|
<template>
|
||
|
|
<view class="fixed tab-bar-box flex">
|
||
|
|
<navigator
|
||
|
|
class="tab-bar-item flex flex-column flex-center"
|
||
|
|
:class="{ active: index === idx }"
|
||
|
|
v-for="(item, idx) of tabs"
|
||
|
|
:key="item.path"
|
||
|
|
:url="item.path"
|
||
|
|
open-type="navigate"
|
||
|
|
hover-class="none"
|
||
|
|
>
|
||
|
|
<image class="nav-icon" :src="index === idx ? item.active_icon : item.icon" />
|
||
|
|
{{ item.text }}
|
||
|
|
</navigator>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
index: {
|
||
|
|
default: 0,
|
||
|
|
type: Number,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
uni.hideTabBar();
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabs: [
|
||
|
|
{
|
||
|
|
text: "首页",
|
||
|
|
path: "/pages/index/index",
|
||
|
|
icon: "/static/icon/explore.png",
|
||
|
|
active_icon: "/static/icon/explore-a.png",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "课程",
|
||
|
|
path: "/pages/special/special_cate",
|
||
|
|
icon: "/static/icon/course.png",
|
||
|
|
active_icon: "/static/icon/course-a.png",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "商城",
|
||
|
|
path: "/pages/store/index",
|
||
|
|
icon: "/static/icon/shop.png",
|
||
|
|
active_icon: "/static/icon/shop-a.png",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "我的",
|
||
|
|
path: "/pages/my/index",
|
||
|
|
icon: "/static/icon/my.png",
|
||
|
|
active_icon: "/static/icon/my-a.png",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.tab-bar-box {
|
||
|
|
height: var(--tab-bar-height);
|
||
|
|
padding-bottom: var(--safe-bottom);
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: #ffffff;
|
||
|
|
box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, 0.06);
|
||
|
|
z-index: 99;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-bar-item {
|
||
|
|
flex: 1;
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: #b5b5b5;
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
color: #4ba0ff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-icon {
|
||
|
|
width: 44rpx;
|
||
|
|
height: 44rpx;
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
}
|
||
|
|
</style>
|