标签：index navbar 微信 tabbar action 图标 true png icon

一、效果：

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

 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>

就可以了。

标签：index,navbar,微信,tabbar,action,图标,true,png,icon
来源： https://blog.csdn.net/ahc176/article/details/120097553

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。