本篇文章用到了 uni-app 团队出的 uView 框架，如果你还不了解 uView，可以先看看官方文档：uView框架

  • 编写组件
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
<template>
  <view>
    <!--  tabbar  -->
    <u-tabbar
      :value="current"
      @change="tabbarChange"
      :safeAreaInsetBottom="false"
    >
      <u-tabbar-item text="病人" :name="0" v-if="checkPermi(['system:app:patient'])">
        <view class="tabbar-icon custom-icon custom-icon-iconku-1 inactive" slot="inactive-icon"></view>
        <view class="tabbar-icon custom-icon custom-icon-iconku-1 jello text-blue" slot="active-icon"></view>
      </u-tabbar-item>
      <u-tabbar-item text="检查" :name="1" v-if="checkPermi(['system:app:check', 'system:app:assess'])">
        <view class="tabbar-icon custom-icon custom-icon-yupanpinggu inactive" slot="inactive-icon"></view>
        <view class="tabbar-icon custom-icon custom-icon-yupanpinggu jello text-blue" slot="active-icon"></view>
      </u-tabbar-item>
      <u-tabbar-item text="手术" :name="2" v-if="checkPermi(['system:app:arrange', 'system:app:wait', 'system:app:enter', 'system:app:operation'])">
        <view class="tabbar-icon custom-icon custom-icon-shoushuwaike inactive" slot="inactive-icon"></view>
        <view class="tabbar-icon custom-icon custom-icon-shoushuwaike jello text-blue" slot="active-icon"></view>
      </u-tabbar-item>
      <u-tabbar-item text="我的" dot class="u-m-t-3" :name="3">
        <view class="user-icon custom-icon custom-icon-wode inactive" slot="inactive-icon"></view>
        <view class="user-icon custom-icon custom-icon-wode jello text-blue" slot="active-icon"></view>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>
  • 隐藏 uni-app 原声 tabbar
1
2
3
created() {
  uni.hideTabBar();
}
  • 绑定 click 事件
1
2
3
tabbarChange(e) {
  this.$tab.reLaunch(this.list[e].pagePath) // list 就是你的 tabbar 页面路径
}
  • 在 tabbar 页面引入组件
1
<tabbar :current="0"></tabbar>
  • Q 弹效果 CSS
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
.jello {
  animation: jello 1s linear;
}

@keyframes jello {
  0% {
    transform: scale(1,1);
  }
  30% {
    transform: scale(1.25,0.75);
  }
  40% {
    transform: scale(0.75,1.25);
  }
  50% {
    transform: scale(1.15,0.85);
  }
  65% {
    transform: scale(0.95,1.05);
  }
  75% {
    transform: scale(1.05,0.95);
  }
  100% {
    transform: scale(1,1);
  }
}