自定义tabbar

合集 - 微信小程序(11)

1.微信小程序自定义顶部tap栏2024-01-19

2.自定义tabbar2024-01-21

3.微信小程序分包2024-01-234.微信小程序高度适配2024-01-235.微信小程序中使用Vant Weapp组件库2024-01-266.如何使用云函数2024-01-297.微信小程序连表查询lookup2024-01-318.微信小程序获取自定义属性2024-01-319.微信小程序页面跳转传参2024-01-3110.页面跳转传参，携带的数值型数据会转成是字符串2024-02-0111.小程序云函数 异步请求2024-02-03

收起

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

1.在app.json中

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

添加   "usingComponents": {}，

?

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

"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中：

?

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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

.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，来看一下效果