1、封装底部导航栏
<template>
<view class="all">
<view :class="{active : types!==index}" v-for='(item,index) in tabberlist' :key="index"
@click="color(index);jump(item.path)">
<text>{{item.title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabberlist: [{
title: '首页',
path: "/pages/index/index"
},
{
title: '我的',
path: '/pages/pageTwo/pageTwo'
}
],
types: 0,
}
},
methods: {
color(index) {
this.types = index;
console.log(this.types);
},
jump(path) {
uni.navigateTo({
url : path
})
}
}
}
</script>
<style>
.all {
width: 100%;
height: 50px;
line-height: 50px;
border: 1px solid #eeeeee;
display: flex;
position: fixed;
bottom: 0;
justify-content: space-around;
}
.active {
color: #ac29c8;
}
</style>
2、在页面里引入
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<TabBar></TabBar>
</view>
</template>
<script>
import TabBar from '../../components/tabBar.vue'
export default {
components: {
TabBar
},
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
3、效果图
注意:需要在pages.json里面取消默认的导航栏。