uniapp自定义Tabbar教程
uniapp自定义Tabbar
1、定义tabbar
在pages.json中配置除主要页面地址，
"tabBar": {
"custom": true,
"list": [{
"pagePath": "pages/home/index"
},
{
"pagePath": "pages/user-center/index"
}
]
},
2、创建自定义Tabbar组件
<template>
<up-tabbar :value="selected" @change="handleChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
<up-tabbar-item v-for="item in tabbarList" :key="item.text" :text="item.text" :icon="item.icon" />
</up-tabbar>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
const props = defineProps({
selected: {
// 当前选中的tab index
type: Number,
default: 1,
},
});
const tabbarList = reactive([
{
text: "首页",
icon: "home",
pagePath: "/pages/home/index"
},
{
text: "我的",
icon: "account",
pagePath: "/pages/user-center/index"
}
])
function handleChange(index) {
console.log('tab ' + index)
const tarbar = tabbarList[index]
// 跳转到其他页面
uni.switchTab({
url: tarbar.pagePath
})
}
</script>
<style scoped lang="scss">
</style>
3、在以上定义的主页面中加入以下的代码，每个页面都要加
<template>
// ........
// 这里的selected很重要，标识这里是第一个页面，如果是第二个 这里就是2
<MyTabbarVue :selected="1" />
</template>
<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import MyTabbarVue from '../../components/MyTabbar.vue';
// 这里主要是为了无感隐藏原来的tabbar
onShow(() => {
uni.hideTabBar({
animation: false
})
})
</script>
原文地址：https://blog.csdn.net/qq_43652321/article/details/142445789
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！