最简单的自定义tabbar_怎么自定义tabbar 简单

可能是菜鸟太菜，所以，感觉看微信小程序文档里面的自定义tabbar，真的感觉好难，而且丝毫看不懂，所以菜鸟一不做二不休，直接自己写一个得了，有网页基础的写这个完全不难。

话不多说，上代码：
HTML

<!--miniprogram/pages/company/companyuser.wxml-->
<view>
  <view wx:if='{{index==="0"}}'>
    <order></order>
  </view>
  <view wx:if='{{index==="1"}}'>
    <menu></menu>
  </view>
  <view wx:if='{{index==="2"}}'>
    <room></room>
  </view>
  <view wx:if='{{index==="3"}}'>
    <set></set>
  </view>

  <view class="bottomView">
    <view data-index="0" bindtap="checked">
      <image src='{{index==="0"?"../../images/order_check.png":"../../images/order.png"}}'></image>
      <text class='{{index==="0"?"colorText":""}}'>订单</text>
    </view>
    <view data-index="1" bindtap="checked">
      <image src='{{index==="1"?"../../images/menu_check.png":"../../images/menu.png"}}'></image>
      <text class='{{index==="1"?"colorText":""}}'>菜单</text>
      <!-- 这里不知道为什么不能写成{{index==1?'':''}} -->
    </view>
    <view data-index="2" bindtap="checked">
      <image src='{{index==="2"?"../../images/room_check.png":"../../images/room.png"}}'></image>
      <text class='{{index==="2"?"colorText":""}}'>包间</text>
    </view>
    <view data-index="3" bindtap="checked">
      <image src='{{index==="3"?"../../images/set_check.png":"../../images/set.png"}}'></image>
      <text class='{{index==="3"?"colorText":""}}'>修改</text>
    </view>
  </view>
</view>

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

CSS

/* miniprogram/pages/company/companyuser.wxss */
.viewHide{
  display: none;
}

page{
  background-color: #bebfc0;
}
/* 写在component里面会警告 */

.bottomView{
  padding-top: 6px;
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: #b2b8bd;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.bottomView view image{
  width: 80rpx;
  height: 80rpx;
}

.bottomView view{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bottomView view text{
  color: white;
}

.bottomView .colorText{
  color: black;
}
/* 不能写成.colorText，因为优先级不够 */
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

JSON

{
  "usingComponents": {
    "room":"../companyuser/room/room",
    "menu":"../companyuser/menu/menu",
    "order":"../companyuser/order/order",
    "set":"../companyuser/set/company"
  },
  "navigationBarTitleText": "企业管理"
}
1
2
3
4
5
6
7
8
9

JS

// miniprogram/pages/company/companyuser.js
Page({
  data: {
    index:"0"
  },
  
  checked:function(e){
    this.setData({
      index:e.currentTarget.dataset.index
    })
    // console.log(typeof(this.data.index))
  },
  // 获取点击的data-index，实现tabbar功能

  onLoad:function(e){
    // console.log("onload")
    // console.log(typeof(e.index))
    if(e.index){
      this.setData({
        index:e.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

HTML

首先HTML里面写wx:if就是为了，当点击另一个tabbar页面的时候，卸载该页面，不然太多页面一起存在会严重影响页面性能（因为我有每个页面是会不定期进行setdata的），我就是一开始用的display：hidden，结果感觉页面直接卡疯。

区别见该博客

JS

JS就是靠的点击事件，来切换index的值，从而达到切换样式。
而onload里面的获取index的值是为了，当我跳转其它页面时，跳转回来依旧得对应该页面。

json

json文件最好去看看我的另一篇博客微信小程序：你必须知道的component自定义组件

菜鸟的tabbar并不是最好的，但是肯定是最简洁的，因为菜鸟很菜，想出来的都是简单东西。

望大佬指点江山，激扬文字