微信小程序自定義tabBar樣式，選中后中間凸起

效果預(yù)覽

微信開發(fā)文檔：自定義tabBar

一、配置信息

• 在 app.json 中的 tabBar 中指定 custom 字段為 true【允許使用自定義 tabBar】

• 在所有 tab 頁 json 中申明usingComponents 項(xiàng)，或者在 app.json 中全局開啟

• 在 list 中指定自己需要 tab

• 示例

  "tabBar": {
      "custom": true,
      "color": "#515151",
      "selectedColor": "#DAA520",
      "backgroundColor": "#000000",
      "list": [
          {
              "pagePath": "pages/index/index",
              "text": "首頁"
          },
          {
              "pagePath": "pages/hospital/hospital",
              "text": "醫(yī)院"
          },
          {
              "pagePath": "pages/publish/publish",
              "text": "item3"
          },
          {
              "pagePath": "pages/popularization/popularization",
              "text": "科普"
          },
          {
              "pagePath": "pages/me/me",
              "text": "我的"
          }
      ]
  },
  "usingComponents": {},
  

二、添加 tabBar 代碼文件

在代碼根目錄下添加custom-tab-bar文件夾，并在該文件夾下新建 page，文件結(jié)構(gòu)如下

|-- cusotm-tab-bar
? ?? |-- index.js
?? ?? |-- index.json
? ??? |-- index.wxml
? ??? |-- index.wxss

三、編寫 tabBar 代碼

1. wxml 代碼

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

2. js 代碼

   // custom-tab-bar/index.js
   Component({
     data: {
       color: "#515151",
       selectedColor: "#DAA520",
       backgroundColor: "#ffffff",
       list: [
         {
           pagePath: "/pages/index/index",
           text: "首頁",
           iconPath: "/images/tabbar/index.png",
           selectedIconPath: "/images/tabbar/index-selected.png"
         },
         {
           pagePath: "/pages/hospital/hospital",
           text: "醫(yī)院",
           iconPath: "/images/tabbar/hospital.png",
           selectedIconPath: "/images/tabbar/hospital-selected.png"
         },
         {
           pagePath: "/pages/publish/publish",
           bulge:true,
           text: "發(fā)布",
           iconPath: "/images/tabbar/dog.png",
           selectedIconPath: "/images/tabbar/dog-selected.png"
         },
         {
           pagePath: "/pages/popularization/popularization",
           text: "科普",
           iconPath: "/images/tabbar/popularization.png",
           selectedIconPath: "/images/tabbar/popularization-selected.png"
         },
         {
           pagePath: "/pages/me/me",
           text: "我的",
           iconPath: "/images/tabbar/me.png",
           selectedIconPath: "/images/tabbar/me-selected.png"
         },
       ]
     },
     attached() {
     },
     methods: {
       switchTab(e) {
         const data = e.currentTarget.dataset
         const url = data.path
         wx.switchTab({url}) 
       }
     }
   })
   

3. wxss 代碼

   .tab-bar {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     height: 50px;
     background: #FFF;
     display: flex;
     line-height: 1.2;
     padding-bottom: env(safe-area-inset-bottom);
     border-top: 1px solid #e6e6e6;
   }
   
   .tab-bar-item {
     flex: 1;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
   }
   
   .tab-bar-item .image {
     width: 26px;
     height: 26px;
   }
   .bulge {
     background-color: #FFF;
   }
   .bulge .tab-bar-bulge{
     position: absolute;
     z-index: -1;
     width: 64px;
     height: 64px;
     top: -24px;
     border-radius: 50%;
     border-top: 1px solid #e6e6e6;
     background-color: #FFF;
   }
   .bulge .image{
     position: absolute; 
     width: 50px;
     height: 50px;
     top: -16px;
   }
   .bulge .tab-bar-view{
     position: relative;
     bottom: -16px;
     margin-top: 4px;
   }
   
   .tab-bar-item .tab-bar-view {
     font-size: 12px;
     margin-top: 4px;
   }
   
   

4. json 代碼

   {
     "component": true
   }
   

四、配置 tab 頁

在每一個(gè) tab 頁的onShow函數(shù)中寫入下面的代碼，其中 selected 的值為每個(gè) tab 的索引文章來源地址http://www.zghlxwxcb.cn/news/detail-496054.html

onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
        this.getTabBar().setData({
            // 首頁為 0
            selected: 0
        })
    }
},

獲取項(xiàng)目源代碼

到了這里，關(guān)于微信小程序自定義tabbar【中間凸起樣式】的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！