一、效果：
二、新建文件夹，做为组件
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>就可以了。
