微信小程序 tabBar模板
tabBar导航栏
小程序tabBar,我们可以通过app.json进行配置,可以放置于顶部或者底部,用于不同功能页面的切换,挺好的。。。
但,,,貌似不能让动态修改tabBar(需求:通过switch开关改变小程序皮肤(包括改变标题栏背景色、tabBar图标及文字颜色、页面部分样式),虽然wx.setTabBarItem(OBJECT)能改变图标,但字体颜色不可以。。。所以改为tabBar模板用法)
我把配置数据统一放在app.js文件,通过点击跳转页面后在把数据添加到当前页面实例上,具体做法如下:
1、新建一个tarBar.wxml模板页,代码如下:
<template name="tabBar"> <view class="flex-h flex-hsb tab-bar" style="color: {{tabBar.color}}; background: {{tabBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}"> <block wx:for="{{tabBar.list}}" wx:key="pagePath"> <navigator url="{{item.active?'':item.pagePath}}" hover-class='none' open-type="reLaunch" class="menu-item" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}"> <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}"></image> <image src="{{item.iconPath}}" wx:if="{{!item.active}}"></image> <text>{{item.text}}</text> </navigator> </block> </view> </template>
2、样式 app.wxss
/*tabBar*/ .tab-bar { position: fixed; z-index: 99999; width: 100%; height: 100rpx; /*line-height: 100rpx;*/ font-size: 22rpx; color: #9b9b9b; background: #fff; text-align: center; display: -webkit-flex; display:flex; } .tab-bar .menu-item { display: block; flex: 1; /*width: 33.3%;*/ height: 100%; } .tab-bar .menu-item image { margin: 10rpx auto 0 auto; display: block; width: 50rpx; height: 50rpx; } .tab-bar .menu-item.active { color: #53df87; }
3、app.js:配置tabBar数据
App({ globalData: { //配置tabBar tabBar:{ "color": "#7f8389", "selectedColor": "#329fff", "backgroundColor": "#f7f7fa", "borderStyle": "#ccc", "position": "bottom", "list": [ { "pagePath": "/pages/index/index", "text": "首页", "iconPath": "/images/icons/home_1.png", "selectedIconPath": "/images/icons/home_2.png", "selectedColor": "#329fff", "active": false }, { "pagePath": "/pages/apply/apply", "text": "报名", "iconPath": "/images/icons/apply_1.png", "selectedIconPath": "/images/icons/apply_2.png", "selectedColor": "#329fff", "active": false }, { "pagePath": "/pages/user/user", "text": "我的", "iconPath": "/images/icons/user_1.png", "selectedIconPath": "/images/icons/user_2.png", "selectedColor": "#329fff", "active": false } ] }, }, //修改tabBar的active值 editTabBar: function () { var _curPageArr = getCurrentPages(); var _curPage = _curPageArr[_curPageArr.length - 1]; var _pagePath = _curPage.__route__; if (_pagePath.indexOf('/') != 0) { _pagePath = '/' + _pagePath; } var tabBar = this.globalData.tabBar; for (var i = 0; i < tabBar.list.length; i++) { tabBar.list[i].active = false; if (tabBar.list[i].pagePath == _pagePath) { tabBar.list[i].active = true;//根据页面地址设置当前页面状态 } } _curPage.setData({ tabBar: tabBar }); }, });
4、index.wxml引入模板
<!--index.wxml--> <import src="../../template/tabBar.wxml" /> <template is="tabBar" data="{{tabBar: tabBar}}" />
5、index.js页面使用:
//获取应用实例 var app = getApp(); Page({ data: { } onLoad: function () { app.editTabBar();//添加tabBar数据 })