自定义tabbar

[基础能力 / 自定义 tabBar (qq.com)]

1.在app.json中

在原来的tabbar配置里面顶部添加  “custom”：true；

添加   "usingComponents": {}，

  "tabBar": {
    "custom": true,
    "color": "#000",
    "selectedColor": "blue",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list":[{
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "pagePath": "pages/find/find",
      "text": "发现"
    },
    {
      "pagePath": "pages/circle/circle",
      "text": "+"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的"
    }]
  },
  "usingComponents": {},

　　注：我没有配置图标

2.在pages同级建一个自定义组件文件夹custom-tab-bar，里面新建组件index

 3.开始编写custom-tab-bar

index.wxml中：

<view class="tab-bar">
    <view class="tab-bar-border"></view>
    <block wx:for="{{list}}" wx:key="index">
        <view wx:if="{{item.isSpecial}}" class="tab-bar-item" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial || false }}" data-index="{{index}}" bindtap="switchTab">
            <view class="special-image">
                <image class="special-image-pic" mode="aspectFit" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
            </view>
            <view style="color: {{selected === index ? selectedColor : color}}" class="special-text tab-text">{{item.text}}</view>
        </view>
        <view wx:else class="tab-bar-item" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial }}" data-index="{{index}}" bindtap="switchTab">
            <image class="item-image" mode="aspectFit" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
            <view class="tab-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
        </view>
    </block>
</view>

 

index.wxss中：

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96rpx;
  background-color:rgb(64, 129, 111);
  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: 2rpx;
  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 .item-image {
  width: 36rpx;
  height: 36rpx;
}

.tab-bar-item .special-image {
  position: absolute;
  top: -36rpx;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  padding: 6rpx;
}

.tab-bar-item .special-image .special-image-pic {
  width: 100%;
  height: 100%;
}

.tab-bar-item .tab-text {
  margin-top: 4rpx;
  font-weight: 600;
}

.tab-bar-item .special-text {
  margin-top: 44rpx
}

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

　

index.js中:

Component({
  data: {
    selected: 0,//当前选中的tab下标
    color: "#1E1E1E",
    selectedColor: "#f6f6f6",//tabbar选中字体颜色
        list: [{
                "pagePath": '/pages/index/index',
                "text": "首页"
            },{
                "pagePath": '/pages/find/find',
                "text": "发现"
            },
            {
                "pagePath": '/pages/circle/circle',
                "text": "+",
        "isSpecial": true
      },
      {
                "pagePath": '/pages/message/message',
                "text": "消息"
            },
            {
        "pagePath": '/pages/mine/mine',
                "text": "我的"
            }
        ],//tabbar循环数据集
  },
  attached() {
  },
  methods: {
    switchTab(e) {
        let data = e.currentTarget.dataset;
          //跳转页面为例
          let url = data.path;
           this.setData({
               selected: data.index
          })
          // 跳转到 tabbar 页，关闭其他所有非 tabbar 页
           wx.switchTab({ url });
    }
}

})

 

　index.json中：

{
  "component": true
}

4.app.js中编写全局函数，控制页面选中状态

  getCurrentTabbar(selected, that) {
    console.log(that.getTabBar());
    console.log(selected);
    if (typeof that.getTabBar === 'function' && that.getTabBar()) {
        that.getTabBar().setData({
            selected: selected
        })
    }
  },

5.在每个tabbar页面调用

 const app = getApp(); 
app.getCurrentTabbar(当前页面在list列表中的index, this); 

 6.完成自定义tabbar，来看一下效果