From 6452a29d1809b92ecb64b8f7bb6798db4503ffa0 Mon Sep 17 00:00:00 2001
From: Lou <luzhiping@qqyjz.com>
Date: Tue, 19 Mar 2024 10:33:52 +0800
Subject: [PATCH] 底部自定义导航
---
components/tabBar/tabBar.vue | 125 +++++++----------------------------------
1 files changed, 21 insertions(+), 104 deletions(-)
diff --git a/components/tabBar/tabBar.vue b/components/tabBar/tabBar.vue
index 1c20505..0690421 100644
--- a/components/tabBar/tabBar.vue
+++ b/components/tabBar/tabBar.vue
@@ -2,21 +2,10 @@
<view>
<u-tabbar class="custom-tabbar" zIndex="100" :value="current" :fixed="true" :active-color="activeColor"
:inactive-color="inactiveColor">
- <u-tabbar-item text="首页" @click="changeTabbar('/pages/home/index')">
- <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-01-selected.png"></image>
- <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-01.png"></image>
- </u-tabbar-item>
- <!-- <u-tabbar-item text="圈子">
- <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-02-selected.png"></image>
- <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-02.png"></image>
- </u-tabbar-item> -->
- <u-tabbar-item text="驾驶舱" v-if="roleType == 2" @click="changeTabbar('/pages/statistics/index')">
- <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-02-selected.png"></image>
- <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-02.png"></image>
- </u-tabbar-item>
- <u-tabbar-item text="个人中心" @click="changeTabbar('/pages/user/center')">
- <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-03-selected.png"></image>
- <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-03.png"></image>
+ <u-tabbar-item :text="item.name" @click="changeTabbar(item.url,index)" v-for="(item,index) in tabbarList"
+ :key="index">
+ <image class="tabbar-icon" slot="active-icon" :src="item.iconPathSelected"></image>
+ <image class="tabbar-icon" slot="inactive-icon" :src="item.iconPath"></image>
</u-tabbar-item>
</u-tabbar>
</view>
@@ -26,117 +15,45 @@
export default {
props: {
current: Number,
- isShowTabbarItem: false
+ list: {
+ type: Array,
+ default: () => []
+ }
},
data() {
return {
-
- roleType: "",
- curRole: {},
- inactiveColor: '#909399',
- activeColor: '#328CFA',
-
- curTabList: [{
- name: '首页',
- iconPathSelected: '/static/img/tabbar-01-selected.png',
- iconPath: '/static/img/tabbar-01.png',
- // icon: "home",
- url: '/pages/home/index'
- },
-
- {
- name: '圈子',
- iconPathSelected: '/static/img/tabbar-02-selected.png',
- iconPath: '/static/img/tabbar-02.png',
- // icon: "home",
- url: '/pages/home/index'
- },
- {
- name: '驾驶舱',
- iconPathSelected: '/static/img/tabbar-02-selected.png',
- iconPath: '/static/img/tabbar-02.png',
- // icon: "home",
- url: '/pages/statistics/index'
- },
-
-
- {
- name: '个人中心',
- iconPathSelected: '/static/img/tabbar-03-selected.png',
- iconPath: '/static/img/tabbar-03.png',
- // icon: "account-fill",
- url: '/pages/user/center'
- }
- ]
+ tabbarList: [],
+ inactiveColor: '#AFB8C3',
+ activeColor: '#5086FA',
}
},
watch: {
- 'curRole.roleName': {
- handler(newVal) {
- if (newVal == "民警") {
- this.roleType = 2
- }
- },
- deep: true,
- immediate: true
- },
-
-
- tabList: {
+ list: {
handler(newVal) {
if (newVal && newVal.length > 0) {
- this.tabList = newVal
+ this.tabbarList = newVal
}
},
deep: true,
immediate: true
- },
- currentTab: {
- handler(newVal) {
- this.currentTab = newVal
- },
- deep: true,
- immediate: true
- },
-
+ }
},
- mounted() {
- this.curRole = uni.getStorageSync("activeRole");
-
- // this.getMessage()
- },
- destroyed() {
-
- },
methods: {
-
-
- changeTabbar(url) {
- uni.reLaunch({
+ changeTabbar(url, index) {
+ if (this.current == index) return
+ uni.switchTab({
url
})
- },
-
-
- change(e) {
- console.log(e);
- uni.reLaunch({
- url: this.curTabList[e].url,
- complete: (res) => {
- console.log("===>", res);
- }
- })
- // this.$emit("change", this.curTabList[e].url)
- },
-
+ this.$emit("change", index)
+ }
}
}
</script>
<style lang="scss" scoped>
.tabbar-icon {
- width: 45rpx;
- height: 45rpx;
+ width: 56rpx;
+ height: 56rpx;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3