羊村懒王

这个屌丝很懒，什么也没留下！

热门标签

uniapp自定义tabBar，根据角色展示路由导航_uniapp custom-tab-bar

作者：羊村懒王 | 2024-02-18 01:23:32

踩

uniapp custom-tab-bar

tabBar上常用属性：

backgroundColor：tabBar 的背景色
borderStyle：tabBar 上边框的颜色
selectedIconPath：选中时的图片路径
iconPath：未选中时的图片路径
selectedColor：tab 上的文字选中时的颜色
color：tab 上文字的默认颜色
1
2
3
4
5
6

tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
当前要根据角色展示tabBar，角色不同展示的tabBar不同。

在`pages.json`页面添加所有要展示的`tabBar`：

注意：！！！custom:true 属性是true时，确定要使用自定义tabBar

	"tabBar":{
		   "custom": true, // 是否使用自定义tabBar
	       "color":"#666",
	       "selectedColor":"#f3980f",
	       "backgroundColor":"#fff",
		   // #ifdef APP-PLUS
	       "borderStyle":"white",
		   // #endif
			"height":"70px",
	       "list":[
	           {
	               "pagePath":"pages/index/index",
	               "text":"跟踪单",
	               "iconPath":"./static/image/gzd01.png",
	               "selectedIconPath":"static/image/gzd.png"
	           },
	           {
	               "pagePath":"pages/bchy/index",
	               "text":"包车货源",
	               "iconPath":"static/image/bchy01.png",
	               "selectedIconPath":"static/image/bchy_act.png"
	           },
	           {
	               "pagePath":"pages/zchy/index",
	               "text":"整车货源",
	               "iconPath":"static/image/zchy.png",
	               "selectedIconPath":"static/image/zchy01.png"
	           },
			   {
				 "pagePath":"pages/ldhy/index",
				 "text":"零担货源",
				 "iconPath":"static/image/ldhy.png",
				 "selectedIconPath":"static/image/ldhy01.png"
			   },
			   {
				"pagePath":"pages/wode/index",
				"text":"我的",
				"iconPath":"static/image/wode.png",
				"selectedIconPath":"static/image/wode01.png"
			   }
	       ]
	   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

在和pages目录同级创建 custom-tab-bar 的文件夹

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
1
2
3
4

index.wxml添加tabBar的结构代码

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
    <cover-view class="tab-bar-border"></cover-view>
    <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
        <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
        <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
    </cover-view>
</cover-view>
1
2
3
4
5
6
7
8

index.wxss 添加样式

.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: white;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
    background-color: rgba(0, 0, 0, 0.33);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
}

.tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.tab-bar-item cover-image {
    width: 27px;
    height: 27px;
}

.tab-bar-item cover-view {
    font-size: 10px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

index.json 文件添加

{
  "component": true,
  "usingComponents": {}
}

1
2
3
4
5

index.js 文件添加数据和事件方法，角色判断

// custom-tab-bar/index.js.js

Component({

    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        selected: null,
		color: "#666",
		selectedColor: "#f3980f",
		backgroundColor: "#fff",
		borderStyle: "white",
		height: "70px",
        list: [],
        list1: [
            {
                pagePath: "/pages/index/index",
                text: "跟踪单",
                iconPath: "/static/image/gzd01.png",
                selectedIconPath: "/static/image/gzd.png",
            },
            {
                pagePath: "/pages/bchy/index",
                text: "包车货源",
                iconPath: "/static/image/bchy01.png",
                selectedIconPath: "/static/image/bchy_act.png",
            },
            {
                pagePath: "/pages/zchy/index",
                text: "整车货源",
                iconPath: "/static/image/zchy.png",
                selectedIconPath: "/static/image/zchy01.png",
            },
            {
                pagePath:"/pages/ldhy/index",
                text:"零担货源",
                iconPath:"/static/image/ldhy.png",
                selectedIconPath:"/static/image/ldhy01.png"
            },
            {
                pagePath: "/pages/wode/index",
                text: "我的",
                iconPath: "/static/image/wode.png",
                selectedIconPath: "/static/image/wode01.png",
            }],
        list2: [
			{
				pagePath: "/pages/index/index",
				text: "跟踪单",
				iconPath: "/static/image/gzd01.png",
				selectedIconPath: "/static/image/gzd.png"
			},
			{
				pagePath: "/pages/wode/index",
				text: "我的",
				iconPath: "/static/image/wode.png",
				selectedIconPath: "/static/image/wode01.png"
			}],
    },

    attached() {
        // utype 角色10 时控制展示tabBar
        // !!! 切换用户后没有重新走一遍 custom-bar-ber 角色不同下面展示菜单会有缓存 可以在每个页面写一边设置list
        const roleId = wx.getStorageSync('userInfo').utype;
        if (roleId == 10) {
            this.setData({
            	list: this.data.list2
            })
            console.log('这里是自定义总组件 角色10');
        }else {
            this.setData({
                list: this.data.list1
            })
            console.log('这里是自定义总组件 角色其他');
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        switchTab(e) {
            const data = e.currentTarget.dataset
            const url = data.path
            // 处理多次点击
            if (data.index === this.data.selected) {
                console.log('多次点击');
                return false;
            }
            wx.switchTab({url})
			// this.setData({
			// 	selected: data.index
			// })

        }
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

！！！tabBar图标切换要点击两次才能有选中状态，继续往下走

在每个tabBar目录（index）页面的onShow生命周期中配置

pages/`index`/`index`

注意：selected 是当前页面路由展示索引，需和tabBar中list顺序匹配；
注意：shippingUser，generalUser 是在utils/tabBar.js 中枚举的目录导航，内容如下（在最下面）import {generalUser, shippingUser} from "../../utils/tabBar"；

		onShow(){
	      // 根据角色自定义tabBar
	      const roleId = uni.getStorageSync('userInfo').utype;
	      if (typeof this.$mp.page.getTabBar === 'function' &&
	          this.$mp.page.getTabBar()) {
	        if (roleId == 10) {
	          this.$mp.page.getTabBar().setData({
	            list: shippingUser,
	            selected: 0
	          })
	          console.log('角色10');
	        }else {
	          this.$mp.page.getTabBar().setData({
	            list: generalUser,
	            selected: 0
	          })
	          console.log('角色其他');
	        }
	      }


		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

pages/`bchy`/`index`

		onShow() {
		  // 根据角色展示tab菜单
	      const roleId = uni.getStorageSync('userInfo').utype;
	      if (typeof this.$mp.page.getTabBar === 'function' &&
	          this.$mp.page.getTabBar()) {
	        if (roleId == 10) {
	          this.$mp.page.getTabBar().setData({
	            list: shippingUser,
	          })
	        }else {
	          this.$mp.page.getTabBar().setData({
	            list: generalUser,
	            selected: 1
	          })
	        }
	      }

		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

pages/`zchy`/`index`

		onShow() {
	      // 自定义tabBar
	      const roleId = uni.getStorageSync('userInfo').utype;
	      if (typeof this.$mp.page.getTabBar === 'function' &&
	          this.$mp.page.getTabBar()) {
	        if (roleId == 10) {
	          this.$mp.page.getTabBar().setData({
	            list: shippingUser,
	          })
	        }else {
	          this.$mp.page.getTabBar().setData({
	            list: generalUser,
	            selected: 2
	          })
	        }
	      }

		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

pages/`ldhy`/`index`

		onShow() {
	      // 自定义tabBar
	      this.role = uni.getStorageSync('userInfo').utype;
	      if (typeof this.$mp.page.getTabBar === 'function' &&
	          this.$mp.page.getTabBar()) {
	        if (this.role == 10) {
	          this.$mp.page.getTabBar().setData({
	            list: shippingUser,
	          })
	        }else {
	          this.$mp.page.getTabBar().setData({
	            list: generalUser,
	            selected: 3
	          })
	        }
	      }
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

pages/`wode`/`index`

		onShow() {
	      // 自定义tabBar
	      this.role = uni.getStorageSync('userInfo').utype;
	
	      if (typeof this.$mp.page.getTabBar === 'function' &&
	          this.$mp.page.getTabBar()) {
	        if (this.role == 10) {
	          this.$mp.page.getTabBar().setData({
	            list: shippingUser,
	            selected: 1
	          })
	        }else {
	          this.$mp.page.getTabBar().setData({
	            list: generalUser,
	            selected: 4
	          })
	        }
	      }
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

utils/`tabBar.js`

// 10的用户
export const shippingUser =  [
    {
        pagePath: "/pages/index/index",
        text: "跟踪单",
        iconPath: "/static/image/gzd01.png",
        selectedIconPath: "/static/image/gzd.png",
    },
    {
        pagePath: "/pages/wode/index",
        text: "我的",
        iconPath: "/static/image/wode.png",
        selectedIconPath: "/static/image/wode01.png",
    }]

// 默认
export const generalUser = [
    {
        pagePath: "/pages/index/index",
        text: "跟踪单",
        iconPath: "/static/image/gzd01.png",
        selectedIconPath: "/static/image/gzd.png"
    },
    {
        pagePath: "/pages/bchy/index",
        text: "包车货源",
        iconPath: "/static/image/bchy01.png",
        selectedIconPath: "/static/image/bchy_act.png"
    },
    {
        pagePath: "/pages/zchy/index",
        text: "整车货源",
        iconPath: "/static/image/zchy.png",
        selectedIconPath: "/static/image/zchy01.png"
    },
    {
        pagePath:"/pages/ldhy/index",
        text:"零担货源",
        iconPath:"/static/image/ldhy.png",
        selectedIconPath:"/static/image/ldhy01.png"
    },
    {
        pagePath: "/pages/wode/index",
        text: "我的",
        iconPath: "/static/image/wode.png",
        selectedIconPath: "/static/image/wode01.png"
    }]

export default {
    shippingUser,
    generalUser
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

最终效果：

自定义tabbar

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/103253

uniapp自定义tabBar，根据角色展示路由导航_uniapp custom-tab-bar

tabBar上常用属性：

在pages.json页面添加所有要展示的tabBar：

在和pages目录同级创建 custom-tab-bar 的文件夹

index.wxml添加tabBar的结构代码

index.wxss 添加样式

index.json 文件添加

index.js 文件添加数据和事件方法，角色判断

在每个tabBar目录（index）页面的onShow生命周期中配置

pages/index/index

pages/bchy/index

pages/zchy/index

pages/ldhy/index

pages/wode/index