uniapp如何设置标签页

在uniapp中设置标签页可以通过使用页面框架底部的tabBar来实现。具体步骤如下：

1.在pages.json文件中添加tabBar选项，并设置相应的跳转路径和图标，例如：

"tabBar": {
"color": "#999",
"selectedColor": "#007aff",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home-active.png"
},
{
"pagePath": "pages/list/list",
"text": "列表",
"iconPath": "static/tabbar/list.png",
"selectedIconPath": "static/tabbar/list-active.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/tabbar/my.png",
"selectedIconPath": "static/tabbar/my-active.png"
}
]
}

2.在每个对应的页面中使用自定义组件来展示标签页栏，例如：

<template>
<view class="index">
<view>这是首页</view>
<tabbar></tabbar>
</view>
</template>

<script>
import tabbar from '@/components/tabbar/index.vue'

export default {
name: 'index',
components: {
tabbar
}
}
</script>

3.完善自定义组件的功能和样式，例如：

<template>
<view class="tabbar">
<view class="item" v-for="(item, index) in list" :key="index" @click="redirectTo(item)">
<image :src="item.selected ? item.selectedIconPath : item.iconPath"></image>
<text :class="item.selected ? 'active' : ''">{{ item.text }}</text>
</view>
</view>
</template>

<script>
export default {
name: 'tabbar',
props: {
list: {
type: Array,
default: () => []
}
},
methods: {
redirectTo (item) {
if (item.pagePath !== this.$mp.page.route) {
uni.redirectTo({
url: '/' + item.pagePath
})
}
}
}
}
</script>

<style>
.tabbar {
display: flex;
justify-content: space-between;
position: fixed;
bottom: 0;
height: 60rpx;
width: 100%;
background-color: #fff;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
}

.item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 33.33%;
font-size: 26rpx;
color: #999;
transition: color 0.3s ease-in-out;
}

.item.active {
color: #007aff;
}

.item image {
height: 40rpx;
width: 40rpx;
margin-bottom: 6rpx;
}
</style>

通过以上操作，一个简单的uniapp标签页就可以实现了。需要注意的是，tabBar组件在uniapp中只能在底部展示，且只能同时展示5个标签页。