微信小程序自帶tabbar，但無法實(shí)現(xiàn)中間按鈕凸起樣式和功能，因此按照設(shè)計(jì)重新自定義一個(gè)tabbar

1、創(chuàng)建tabbar文件，與pages同級(jí)創(chuàng)建一個(gè)文件夾，custom-tab-bar,里面按照設(shè)計(jì)圖將底部tabbar樣式編寫

<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-name="{{item.text}}" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial || false }}" data-index="{{index}}" bindtap="switchTab">
      <view class="special-image">
        <image class="special-image-pic" mode="widthFix" 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-name="{{item.text}}" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial }}" data-index="{{index}}" bindtap="switchTab">
      <image class="item-image" mode="widthFix" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
      <view class="tab-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
      <view class="num" wx:if="{{item.text == '消息' && message_num != 0}}">{{message_num}}</view>
    </view>
  </block>
</view>

2、在app.js中添加點(diǎn)擊事件

  /* 自定義底部按鈕切換 */
  getCurrentTabbar(selected, that) {
    if (typeof that.getTabBar === 'function' &&
      that.getTabBar()) {
      if (wx.getStorageSync('openid')) {
        msg_unread().then(res => {
          that.getTabBar().setData({
            selected: selected,
            message_num: res.data.data
          })
        })
      } else {
        that.getTabBar().setData({
          selected: selected
        })
      }
    }
  },

3、在app.json中修改默認(rèn)tabbar數(shù)據(jù)結(jié)構(gòu)

  "tabBar": {
    "custom": true,
    "list": [
        {
            "pagePath": "pages/index/index",
            "text": "首頁"
        },
        {
            "pagePath": "pages/contact/index",
            "text": "通訊錄"
        },
        {
            "pagePath": "pages/release/index",
            "text": "發(fā)布"
        },
        {
            "pagePath": "pages/news/index",
            "text": "消息"
        },
        {
            "pagePath": "pages/personal/index",
            "text": "我的"
        }
    ]
},

4、在對(duì)應(yīng)的頁面中執(zhí)行點(diǎn)擊事件

  app.getCurrentTabbar(index,this);
  /* index:tabbar對(duì)應(yīng)的index */

如需源碼，請(qǐng)點(diǎn)擊下載源碼，或點(diǎn)擊頂部下載按鈕文章來源地址http://www.zghlxwxcb.cn/news/detail-719570.html

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