微信小程序自定义tabbar，分为医生端和患者端模拟不同角色登录

自定义TabBar设置

介绍微信小程序如何自定义tabbarr界面，使用开发环境为微信开发原生工具，本文案例： 小程序有两个角色用户——医生端、患者端，每个角色进入小程序之后都有其所对应的tabbar界面， 隔离角色的权限，医生端无法进入患者端，患者端无法进入医生端。

1 成果展示

小程序进入界面：

患者登录入口：

医生登录入口：

2 开发步骤

2.1 了解tabbar的概念

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

在自定义 tabBar 模式下

为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。 此时需要开发者提供一个自定义组件来渲染 tabBar，所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。 与 tabBar 样式相关的接口，如 wx.setTabBarItem 等将失效。 每个 tab 页下的自定义 tabBar 组件实例是不同的，可通过自定义组件下的 getTabBar 接口，获取当前页面的自定义 tabBar 组件实例。 链接：自定义 tabBar | 微信开放文档

2.2 创建微信小程序项目

项目结构：

2.3 设置app.js代码，添加tabbar页面，并将custom设置为true,app.js代码：

{
"pages":[
"pages/indes/indes",
"pages/patient/main/main",
"pages/patient/my/my",
"pages/doctor/my/my",
"pages/doctor/message/message"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#fffff",
"list": [{
"pagePath": "pages/patient/main/main",
"text": "患者首页",
"iconPath": "/icon/首页 (4).png",
"selectedIconPath": "/icon/首页-copy.png"
}, {
"pagePath": "pages/patient/my/my",
"text": "患者我的",
"iconPath": "/icon/我的 (1).png",
"selectedIconPath": "/icon/我的.png"
},
{
"pagePath": "pages/doctor/my/my",
"text": "医生首页",
"iconPath": "/icon/首页 (1).png",
"selectedIconPath": "/icon/首页.png"
},
{
"pagePath": "pages/doctor/message/message",
"text": "工作日志",
"iconPath": "/icon/医疗档案_medical-files (2).png",
"selectedIconPath": "/icon/医疗档案_medical-files (2).png"
}
]
}
}

2.4 新建custom-tab-bar目录，并在目录下创建Component文件命名为index（官方要求），并依次添加代码

index.js

// custom-tab-bar/index.js
Component({
/**
* 组件的属性列表
  */
  properties: {

},

/**
* 组件的初始数据
  */
  data: {
  allList:[
  [
  {
  "pagePath": "/pages/patient/main/main",
  "text": "患者首页",
  "iconPath": "/icon/首页 (4).png",
  "selectedIconPath": "/icon/首页-copy.png",
  "selected":"00"
  }, {
  "pagePath": "/pages/patient/my/my",
  "text": "患者我的",
  "iconPath": "/icon/我的.png",
  "selectedIconPath": "/icon/我的 (1).png",
  "selected":"01"
  }
  ],
  [
  {
  "pagePath": "/pages/doctor/my/my",
  "text": "医生首页",
  "iconPath": "/icon/首页 (1).png",
  "selectedIconPath": "/icon/首页.png",
  "selected":"02"
  },
  {
  "pagePath": "/pages/doctor/message/message",
  "text": "工作日志",
  "iconPath": "/icon/医疗档案_medical-files (2).png",
  "selectedIconPath": "/icon/医疗档案_medical-files (1).png",
  "selected":"03"
  }

  ]
  ],
  selectList:[],
  },
  /**
* 生命周期的方法：当组件被加载的时候调用
  */
  attached(){
  if(wx.getStorageSync('user')=="01"){
  this.setData({
  selectList:this.data.allList[0]
  })
  }else{
  this.setData({
  selectList:this.data.allList[1]
  })
  }



},
/**
* 组件的方法列表
  */
  methods: {
  swichTo(e){
  //console.dir(e);
  let path=e.currentTarget.dataset.path;
  let selected=e.currentTarget.dataset.selected;

  wx.switchTab({
  url: path,
  })
  }
  }
  })

index.wxml

<!--custom-tab-bar/index.wxml-->
<view class="tab-bar">
  <view class="tab-bar-border"></view>
  <view wx:for="{{selectList}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-selected="{{item.selected}}" data-index="{{index}}" bindtap="swichTo">
    <image class="cover-image" src="{{selected === item.selected ? item.selectedIconPath : item.iconPath}}"></image>
    <view class="cover-view" style="color: {{selected === item.selected ? selectedColor : color}}">{{item.text}}</view>
  </view>
</view>

index.wxss

/* custom-tab-bar/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: 44rpx;
height: 44rpx;
}

.tab-bar-item .cover-view {
margin-top: 8rpx;
font-size: 24rpx;
}

2.5 配置入口文件indes

在indes.js添加goto方法函数：

goto(e){
//  console.dir(e);
//把权限存储缓存当中
wx.setStorageSync('user', e.currentTarget.dataset.type);
if(e.currentTarget.dataset.type=="01"){
wx.switchTab({
url: '../patient/main/main',
})
}else{
wx.switchTab({
url: '../doctor/my/my',
})
}
},

index.wxml

<!--pages/indes/indes.wxml-->
<view class="container">
  <button type="primary" bindtap="goto" data-type="01" style="margin:20rpx;border-radius: 20rpx;">患者登录入口</button>
  <button type="primary" bindtap="goto" data-type="02" style="margin:20rpx;border-radius: 20rpx;">医生登录入口</button>
</view>

2.6 添加每个tabbar界面的.js文件的onShow方法函数（selected: ""的值要特别注意，在index.js中，selected: ""的值对应那个tabbar界面就填入那个tabbar界面的值）

onShow() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: "00"
})
}
},

配置完成之后就可以运行啦！！！