wx小步伐自定义tabbar

1.在app.json文件中，添加自定义tabbar配置："custom": true

1.   "tabBar": {
2.     "custom": true,
3.     "backgroundColor": "#fafafa",
4.     "borderStyle": "white",
5.     "selectedColor": "#40ae36",   
6.     "color": "#666",
7.     "list": [
8.       {
9.         "pagePath": "pages/index/index",
10.         "iconPath": "static/images/home.png",
11.         "selectedIconPath": "static/images/home@selected.png",
12.         "text": "首页"
13.       },
14.       {
15.         "pagePath": "pages/adoptProduct/adoptProduct",
16.         "iconPath": "static/images/adopt.png",
17.         "selectedIconPath": "static/images/adopt@selected.png",
18.         "text": "认养"
19.       },
20.       {
21.         "pagePath": "pages/supermarket/supermarket",
22.         "iconPath": "static/images/supermarket.png",
23.         "selectedIconPath": "static/images/supermarket@selected.png",
24.         "text": "农副超市"
25.       },     
26.       {
27.         "pagePath": "pages/ucenter/index/index",
28.         "iconPath": "static/images/my.png",
29.         "selectedIconPath": "static/images/my@selected.png",
30.         "text": "我的"
31.       }
32.     ]
33.   }

复制代码

2.新建根目次文件

index.wxml

1. <view class="tabBar">
2.   <view class="cont">
3.     <block wx:for="{{tabBar.list}}" wx:key="index" class="cont-item">
4.       <view data-path="{{item.pagePath}}" data-index="{{item.pagePath}}" bindtap="switchTab" class="{{item.search?'search':'item'}} {{tabIndex === index ? 'on' : 'off'}}">
5.         <image src="{{tabIndex === index  ? item.selectedIconPath : item.iconPath}}"></image>
6.         <view class="txt {{tabIndex === index ? 'selectedColor' : ''}}">{{item.text}}</view>
7.       </view>
8.     </block>
9.   </view>
10. </view>

复制代码

index.wxss

1. .tabBar {
2.   z-index: 100;
3.   width: 100%;
4.   position: fixed;
5.   bottom: 0;
6.   font-size: 28rpx;
7.   background-color: #fff;
8.   color: #636363;
9. }
10. .cont {
11.   z-index: 0;
12.   height: calc(100rpx + env(safe-area-inset-bottom) / 2);
13.   padding-bottom: calc(env(safe-area-inset-bottom) / 2);
14.   padding-bottom: 30rpx;
15.   display: flex;
16.   justify-content: space-around;
17. }
18. .cont .item {
19.   font-size: 24rpx;
20.   position: relative;
21.   width: 15%;
22.   text-align: center;
23.   padding: 0;
24.   display: block;
25.   height: auto;
26.   line-height: 1;
27.   margin: 0;
28.   background-color: inherit;
29.   overflow: initial;
30.   justify-content: center;
31.   align-items: center;
32.   padding-top: 20rpx;
33. }
34. .cont .item image {
35.   width: 50rpx !important;
36.   height: 50rpx !important;
37.   margin: auto
38. }
39. .cont .selectedColor {
40.   color: #40ae36;
41. }
42. .txt{
43.   font-size: 24rpx;
44. }

复制代码

index.js

1. //获取应用实例
2. const app = getApp();
3. Component({
4.   data: {},
5.   methods: {
6.     switchTab(e) {
7.       const data = e.currentTarget.dataset
8.       const url = data.path
9.       wx.switchTab({url})
10.     }
11.   }
12. })

复制代码

index.json

1. {
2.   "component": true,
3.   "usingComponents": {}
4. }

复制代码

3.在utils添加tab-service.js(通过接口请求，去判断体现谁人tabbar)

1. let tabData = {
2.   tabIndex: 0,//底部按钮高亮下标
3.   tabBar: {
4.       custom: true,
5.       color: "#5F5F5F",
6.       selectedColor: "#07c160",
7.       backgroundColor: "#F7F7F7",
8.       list: []
9.   }
10. }
12. // 更新菜单
13. const updateRole = (that, type) => {
14. if (type === '0') {
15.     tabData.tabBar.list=[{
16.       pagePath: "/pages/index/index",
17.       iconPath: "/static/images/home.png",
18.       selectedIconPath: "/static/images/home@selected.png",
19.       text: "首页"
20.     },
21.     {
22.       pagePath: "/pages/adoptProduct/adoptProduct",
23.       iconPath: "/static/images/adopt.png",
24.       selectedIconPath: "/static/images/adopt@selected.png",
25.       text: "认养"
26.     },
27.     {
28.       pagePath: "/pages/supermarket/supermarket",
29.       iconPath: "/static/images/supermarket.png",
30.       selectedIconPath: "/static/images/supermarket@selected.png",
31.       text: "农副超市"
32.     },     
33.     {
34.       pagePath: "/pages/ucenter/index/index",
35.       iconPath: "/static/images/my.png",
36.       selectedIconPath: "/static/images/my@selected.png",
37.       text: "我的"
38.     }]
39.   }else if (type === '1'){
40.     tabData.tabBar.list= [{
41.       pagePath: "/pages/index/index",
42.       iconPath: "/static/images/home.png",
43.       selectedIconPath: "/static/images/home@selected.png",
44.       text: "首页"
45.     },
46.     {
47.       pagePath: "/pages/supermarket/supermarket",
48.       iconPath: "/static/images/supermarket.png",
49.       selectedIconPath: "/static/images/supermarket@selected.png",
50.       text: "农副超市"
51.     },     
52.     {
53.       pagePath: "/pages/ucenter/index/index",
54.       iconPath: "/static/images/my.png",
55.       selectedIconPath: "/static/images/my@selected.png",
56.       text: "我的"
57.     }]
58.   }
59.   updateTab(that);
60. }
62. // 更新底部高亮
63. const updateIndex = (that, index) => {
64.   tabData.tabIndex = index;
65.   updateTab(that);
66. }
68. // 更新Tab状态
69. const updateTab = (that) => {
70.   if (typeof that.getTabBar === 'function' && that.getTabBar()) {
71.       that.getTabBar().setData(tabData);
72.   }
73. }
75. // 将可调用的方法抛出让外面调用
76. module.exports = {
77.   updateRole, updateTab, updateIndex,tabBar:tabData.tabBar.list
78. }

复制代码

4.在tabbar对应界面添加

1. tabService.updateRole(this,'0') // 显示所有tabbar4个
2. tabService.updateRole(this,'1') // 显示tabbar中的3个
3. tabService.updateIndex(this, 0)  // tabbar高亮

复制代码

首页中的index.js

1. onShow(){
2.     this.chooseMenu()
3.     tabService.updateIndex(this, 0)  // tabbar高亮
4.   }
5. chooseMenu(){
6.         util.request(api.chooseMenu, {
7.         }, 'GET').then(res => {
8.           if (res.errno === 0) {
9.             if(res.data == 1 ) {
10.               tabService.updateRole(this,'1')
11.             }else {
12.               tabService.updateRole(this,'0')
13.             }
14.           }
15.           else{
16.             util.showErrorToast(res.errmsg);
17.           }
18.         })
19.       }

复制代码

我的页面中的index.js

1. onShow(){
2.     this.chooseMenu()
3.     tabService.updateIndex(this, 0)  // tabbar高亮
4.   }
5. chooseMenu(){
6.         util.request(api.chooseMenu, {
7.         }, 'GET').then(res => {
8.           if (res.errno === 0) {
9.             if(res.data == 1 ) {
10.                tabService.updateRole(this,'1')
11.                tabService.updateIndex(this, 2)  //由于tabService.updateRole(this,'1')为1，所有少一个认养tabbar，所有updateIndex应传2高亮
12.             }else {
13.                tabService.updateRole(this,'0')
14.                tabService.updateIndex(this, 3)
15.             }
16.           }
17.           else{
18.             util.showErrorToast(res.errmsg);
19.           }
20.         })
21.       }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。