uni-app关于tabBar配置
这里有两种方法,都能实现,可以参考,有疑问可以提出!共同学习!!!
第一种方法
使用步骤
1,在pages中创建三个tabba页面,并在页面添加一些要显示出来的东西
2, 在pages.json文件里面配置文件页面路由
正常的话这三个tabbar页面也需要在tabBar 中的 list 是一个数组,最少2个、最多5个,但在这里暂时不需要
3,先在home页引入底部tabbar导航
import tablebox from '../../../components/tablebox.vue';
tablebox.vue
<template>
<view class="tableboxpage">
<view class="footerShells">
<view v-for="(item, index) in list" :key="index" :class="{ Selection: flag == item.id }" @tap="Jump(item)">
<image v-if="flag == item.id" style="width: 40rpx; height: 40rpx" :src="item.image1" />
<image v-else style="width: 40rpx; height: 40rpx" :src="item.image2" />
<view class="footText">{
{
item.name }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
flag: {
type: [Number, String],
default: 1,
},
},
data() {
return {
list: [
{
id