微信小程序tabbar美化（中间图标突起）

本文主要是介绍微信小程序tabbar美化（中间图标突起），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、效果：

 二、新建文件夹，做为组件

 js:

// components/navbar/index.js
const App = getApp();

Component({
  options: {
    addGlobalClass: true,
  },
  externalClasses: ['custom-class'],
  /**
   * 组件的属性列表
   */
  properties: {
    pageName:String,
    showNav: {
      type: Boolean,
      value: true
    },
    bgColor:{
      type: String,
      value: '#fff'
    },
    iconColor:{
      type: String,
      value: '#000'
    },
    titleColor:{
      type: String,
      value: '#000'
    },
    back: {
      type: Boolean,
      value: true
    },
    index: {
      type: Boolean,
      value: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
   
  },
  lifetimes: {
    attached: function () {
      this.setData({
        navHeight: App.globalData.navHeight,
        navTop: App.globalData.navTop
      })
     }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //回退
    _navBack: function () {
      wx.navigateBack({
        delta: 1
      })      
    },
    //回主页
    _toIndex: function () {
      wx.switchTab({
        url: '/pages/index/index'
      })
    },
  }
})

wxml:

<!--components/navbar/index.wxml-->
<view class="navbar custom-class" style='height:{{navHeight}}px;background:{{bgColor}}'>
  <view wx:if="{{showNav}}" class="navbar-action-wrap navbar-action-group row item-center" style='top:{{navTop}}px;'>
      <ss-icon name="back" wx:if="{{ back }}" color="{{iconColor}}" size="15px" block="{{true}}" class="navbar-action_item" bind:click="_navBack"></ss-icon>
      <ss-icon name="index" wx:if="{{ index }}" color="{{iconColor}}" size="15px" block="{{true}}" class="navbar-action_item last" bind:click="_toIndex"></ss-icon>
  </view>
  <view class='navbar-title' style='top:{{navTop}}px;color:{{titleColor}}'>
    {{pageName}}
  </view>
</view>

wxss:

/* components/navbar/index.wxss */

.navbar {
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  flex-shrink: 0;
}

.navbar-title {
  width: 100%;
  box-sizing: border-box;
  padding-left: 115px;
  padding-right: 115px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  position: absolute;
  left: 0;
  z-index: 10;
  color: #333;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.navbar-action-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  left: 10px;
  z-index: 11;
  line-height: 1;
  /* padding-top: 4px;
  padding-bottom: 4px; */
}

.navbar-action-group {
  border: 1px solid #f0f0f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.2);
}

.navbar-action_item {
  color: #333;
}

.navbar-action-group .navbar-action_item {
  border-right: 1px solid #f0f0f0;
}

.navbar-action-group .last {
  border-right: none;
}

json:

{
  "component": true,
  "usingComponents": {
    "ss-icon": "../icon/index"
  }
}

app.json:改为

"tabBar": {
  "list": [
    {
      "pagePath": "pages/shouye/shouye",
      "text": "首页",
      "iconPath": "icon/sy.png",
      "selectedIconPath": "icon/sy1.png"
    },
    {
      "pagePath": "pages/faxian/faxian",
      "text": "发现",
      "iconPath": "icon/faxian.png",
      "selectedIconPath": "icon/faxian1.png"
    },
    {
    "pagePath": "pages/first/first",
    "text": "计划",
    "iconPath": "icon/zj.png",
    "selectedIconPath": "icon/zj1.png"
  },

  {
    "pagePath": "pages/third/third",
    "text": "分析",
    "iconPath": "icon/fx.png",
    "selectedIconPath": "icon/fx1.png"
  },
  {
    "pagePath": "pages/index/index",
    "text": "个人",
    "iconPath": "icon/gr.png",
    "selectedIconPath": "icon/gr1.png"
  }
],
  "custom": true,
  "color": "#515151",
  "selectedColor": "black",
  "borderStyle": "black",
  "backgroundColor": "#ffffff"
},

在tabbar指向的页面js文件里添加：

selected：改为指向的页面index

  onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 2
      })
    }
  },

在tabbar指向的页面wxml最后一行：

<tabbar tabbar="{{tabbar}}"></tabbar>

就可以了。

这篇关于微信小程序tabbar美化（中间图标突起）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！