小程序tabBar模板
⼩程序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: {{lor}}; background: {{tabBar.backgroundCo
lor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderSt  <block wx:for="{{tabBar.list}}" wx:key="pagePath">
<navigator url="{{item.active?'':item.pagePath}}" hover-class='none' open-type="reLaunch"class="menu-item" >
<image src="{{item.selectedIconPath}}" wx:if="{{item.active}}"></image>
<image src="{{item.iconPath}}" wx:if="{{!item.active}}"></image>
<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数据
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。