{
"pages": [
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/message/index",
"style": {
"navigationBarTitleText": "消息"
}
},
{
"path": "pages/discover/index",
"style": {
"navigationBarTitleText": "发现"
}
},
{
"path": "pages/user/index",
"style": {
"navigationBarTitleText": "我的"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "HelloApp",
"navigationBarBackgroundColor": "#333",
"backgroundColor": "#f8f8f8"
},
"tabBar": {
"borderStyle": "white",
"backgroundColor": "#fff",
"color": "#555",
"selectedColor": "#24afd6",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/image/icon/home.png",
"selectedIconPath": "static/image/icon/home-act.png"
},
{
"text": "消息",
"pagePath": "pages/message/index",
"iconPath": "static/image/icon/message.png",
"selectedIconPath": "static/image/icon/message-act.png"
},
{
"text": "发现",
"pagePath": "pages/discover/index",
"iconPath": "static/image/icon/discover.png",
"selectedIconPath": "static/image/icon/discover-act.png"
},
{
"text": "我的",
"pagePath": "pages/user/index",
"iconPath": "static/image/icon/user.png",
"selectedIconPath": "static/image/icon/user-act.png"
}
]
}
}
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const qTabbar = reactive({
list: [
{
id: 1,
name: "首页",
icon: "home",
url: "/pages/index/index",
},
{
id: 2,
name: "消息",
icon: "message",
url: "/pages/message/index",
},
{
id: 3,
name: "发现",
icon: "discover",
url: "/pages/discover/index",
},
{
id: 4,
name: "我的",
icon: "user",
url: "/pages/user/index",
},
],
});
const props = defineProps({
// 当前导航
current: {
type: Number,
default: 1,
},
// 文字颜色
color: {
type: String,
default: "#999",
},
// 活动颜色
activeColor: {
type: String,
default: "#fff",
},
// 背景色
bgColor: {
type: String,
default: "#333",
},
// 边框色
borColor: {
type: String,
default: "#e3e3e3",
},
// 显示文字
showText: {
type: Boolean,
default: true,
},
// 显示图标
showIcon: {
type: Boolean,
default: true,
},
});
// 发送消息
const emits = defineEmits(["change"]);
// 方法
// 加载
onLoad(() => {
uni.hideTabBar();
});
// 切换导航
function toggleNav(item) {
uni.switchTab({
url: item.url,
success() {
emits("change", item);
},
});
}