111 lines
2.5 KiB
Vue
111 lines
2.5 KiB
Vue
<template>
|
|
<u-tabbar
|
|
:value="currentIndex"
|
|
:show="true"
|
|
:bg-color="'#fff'"
|
|
:border-top="false"
|
|
:fixed="true"
|
|
:height="148"
|
|
:list="formattedTabList"
|
|
@change="switchTab"
|
|
>
|
|
</u-tabbar>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "TabBar",
|
|
props: {
|
|
currentPath: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
currentIndex: 0,
|
|
tabList: [
|
|
{
|
|
text: "会话列表",
|
|
iconText: "📋",
|
|
useImg: true,
|
|
icon: "/static/tabbar/tabbar-icon1.png",
|
|
activeIcon: "/static/tabbar/tabbar-icon1-active.png",
|
|
pagePath: "/pages/home/conversations/index",
|
|
},
|
|
{
|
|
text: "留言板",
|
|
iconText: "📊",
|
|
useImg: true,
|
|
icon: "/static/tabbar/tabbar-icon2.png",
|
|
activeIcon: "/static/tabbar/tabbar-icon2-active.png",
|
|
pagePath: "/pages/notes/index",
|
|
},
|
|
{
|
|
text: "我的",
|
|
iconText: "👤",
|
|
useImg: true,
|
|
icon: "/static/tabbar/tabbar-icon3.png",
|
|
activeIcon: "/static/tabbar/tabbar-icon3-active.png",
|
|
pagePath: "/pages/my/index",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
// 格式化tabList为uview的u-tabbar所需格式
|
|
formattedTabList() {
|
|
return this.tabList.map((item) => {
|
|
return {
|
|
text: item.text,
|
|
iconPath: item.icon,
|
|
selectedIconPath: item.activeIcon,
|
|
pagePath: item.pagePath,
|
|
};
|
|
});
|
|
},
|
|
},
|
|
created() {
|
|
// 根据当前路径设置激活的tab
|
|
this.setActiveTab();
|
|
},
|
|
methods: {
|
|
setActiveTab() {
|
|
const currentPath = this.currentPath || this.getCurrentPath();
|
|
this.tabList.forEach((item, index) => {
|
|
if (currentPath.includes(item.pagePath)) {
|
|
this.currentIndex = index;
|
|
}
|
|
});
|
|
},
|
|
getCurrentPath() {
|
|
// 获取当前页面路径
|
|
const pages = getCurrentPages();
|
|
if (pages.length > 0) {
|
|
const currentPage = pages[pages.length - 1];
|
|
return "/" + currentPage.route;
|
|
}
|
|
return "";
|
|
},
|
|
switchTab(index) {
|
|
if (this.currentIndex === index) return;
|
|
|
|
this.currentIndex = index;
|
|
this.$emit("change", this.tabList[index].pagePath, index);
|
|
|
|
// 跳转到对应页面
|
|
uni.switchTab({
|
|
url: this.tabList[index].pagePath,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* /deep/.u-icon__img {
|
|
width: 54rpx !important;
|
|
height: 54rpx !important;
|
|
} */
|
|
</style>
|