自定义导航栏
由于需要,小程序是通过用户名和密码登录的,不是通过微信授权登录。小程序本身自带tabBar,但是无法动态改变,小程序用户角色不同,需要显示的导航栏不同,这时,就需要自定义导航栏了。开始查资料的时候,有已经写好的底部导航栏,可以动态改变,于是直接复制过来,但是很快发现了问题:底部导航栏的固定使用的是 position:fixed,bottom:0 , 也就是固定在底部。这时的问题是,导航栏会和正文部分内容重叠。于是又去问度娘,有解决方法说,给正文部分加一个padding-bottom就行,不过我自己试了好多遍,修改了好多,还是无法解决重叠的问题,这个问题困扰了我好久,,后来终于查到了一篇博客,解决了问题。
根据登录角色不同,设置底部导航栏
首先,新建一个文件夹,封装底部导航栏
其中只需完成tabBar.wxml,样式直接放在app.wxss中
tabBar.wxml
<template name="tabBar">
<view class="tab-bar" style="color: {{tabBar.color}};backgroundcolor:white" >
<block wx:for="{{tabBar.list}}" wx:key="pagePath">
<navigator url="{{item.pagePath}}" open-type="redirect" class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">
<image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image>
<image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image>
<text class='tabbar_text' style='display:block'>{{item.text}}</text>
</navigator>
</block>
<view class="clear"></view>
</view>
</template>
app.wxss
.container {
height: 100%;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
/* 角色1 */
.menu-item{
width: 25%;
float: left;
text-align: center;
padding: 0;
padding-top: 15rpx;
background-color: white;
}
/* 角色2 */
.menu-item1{
width: 33.3%;
float: left;
text-align: center;
padding: 0;
padding-top: 15rpx;
background-color: white;
}
/* 角色3 */
.menu-item2{
width: 50%;
float: left;
text-align: center;
padding: 0;
padding-top: 15rpx;
background-color: white;
}
.img{
width: 35rpx;
height: 35rpx;
display: block;
margin:auto;
}
.clear{
clear: both;
}
.tab-bar{
width: 100%;
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(109, 82, 82, 0.1);
}
.tabbar_text{
margin-top: 5rpx;
margin-bottom: 8rpx;
font-size: 24rpx
}
调用导航栏,根据角色动态改变
实现原理:
小程序中每个页面都有自己的导航栏,即在每个页面中调用相应角色的导航栏
调用函数定义
直接写在app.js中
app.js
//角色1
editTabBar0: function () {
var _curPageArr = getCurrentPages();
var _curPage = _curPageArr[_curPageArr.length - 1];
var _pagePath = _curPage.__route__;
if (_pagePath.indexOf('/') != 0) {
_pagePath = '/' + _pagePath;
}
var tabBar = this.globalData.tabBar0;
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
});
},
//角色2
editTabBar1: function () {
var _curPageArr = getCurrentPages();
var _curPage = _curPageArr[_curPageArr.length - 1];
var _pagePath = _curPage.__route__;
if (_pagePath.indexOf('/') != 0) {
_pagePath = '/' + _pagePath;
}
var tabBar = this.globalData.tabBar1;
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
});
},
//角色3
editTabBar2: function () {
var _curPageArr = getCurrentPages();
var _curPage = _curPageArr[_curPageArr.length - 1];
var _pagePath = _curPage.__route__;
if (_pagePath.indexOf('/') != 0) {
_pagePath = '/' + _pagePath;
}
var tabBar = this.globalData.tabBar2;
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
});
},
同时,将导航栏参数,放在全局变量中
app.js
globalData: {
userInfo: null,
tabBar0: {
"color": "#747474",
"selectedColor": "#D03A28",
"backgroundColor": "#fff",
"borderStyle": "#ccc",
"list": [
{
"pagePath": "/pages/index/index",
"text": "医疗服务",
"iconPath": "../images/bars/medical1.png",
"selectedIconPath": "../images/bars/medical.png",
"clas": "menu-item",
"selectedColor": "#D03A28",
active: true
},
{
"pagePath": "/pages/daily/daily",
"text": "日常服务",
"iconPath": "../images/bars/daily1.png",
"selectedIconPath": "../images/bars/daily.png",
"selectedColor": "#D03A28",
"clas": "menu-item",
active: false
},
{
"pagePath": "/pages/class/class",
"text": "活动",
"iconPath": "../images/bars/class1.png",
"selectedIconPath": "../images/bars/class.png",
"selectedColor": "#D03A28",
"clas": "menu-item",
active: false
},
{
"pagePath": "/pages/oldcenter/oldcenter",
"text": "我的",
"iconPath": "../images/bars/my1.png",
"selectedIconPath": "../images/bars/my.png",
"selectedColor": "#D03A28",
"clas": "menu-item",
active: false
}
],
"position": "bottom"
},
tabBar1: {
"color": "#9E9E9E",
"selectedColor": "#f00",
"backgroundColor": "#fff",
"borderStyle": "#ccc",
"list": [
{
"pagePath": "/pages/daily_volunteer/daily_volunteer",
"text": "日常服务",
"iconPath": "../images/bars/daily1.png",
"selectedIconPath": "../images/bars/daily.png",
"clas": "menu-item1",
"selectedColor": "#D03A28",
active: true
},
{
"pagePath": "/pages/volunteer_service/volunteer_service",
"text": "活动",
"iconPath": "../images/bars/class1.png",
"selectedIconPath": "../images/bars/class.png",
"selectedColor": "#D03A28",
"clas": "menu-item1",
active: false
},
{
"pagePath": "/pages/volunteercenter/volunteercenter",
"text": "我的",
"iconPath": "../images/bars/my1.png",
"selectedIconPath": "../images/bars/my.png",
"selectedColor": "#D03A28",
"clas": "menu-item1",
active: false
}
],
"position": "bottom"
},
tabBar2: {
"color": "#9E9E9E",
"selectedColor": "#f00",
"backgroundColor": "#fff",
"borderStyle": "#ccc",
"list": [
{
"pagePath": "/pages/admin_activity/admin_activity",
"text": "活动",
"iconPath": "../images/bars/class1.png",
"selectedIconPath": "../images/bars/class.png",
"selectedColor": "#D03A28",
"clas": "menu-item2",
active: true
},
{
"pagePath": "/pages/admincenter/admincenter",
"text": "我的",
"iconPath": "../images/bars/my1.png",
"selectedIconPath": "../images/bars/my.png",
"selectedColor": "#D03A28",
"clas": "menu-item2",
active: false
}
],
"position": "bottom"
},
}
页面中调用举例
example.wxml
<import src="../template/tabBar.wxml"/>
<view>正文</view>
<template is="tabBar" data="{{tabBar:tabBar}}"></template>
example.js
const app = getApp();
Page({
onLoad: function (options) {
app.editTabBar0();//加载底部导航栏,角色1
}
})
总结:在登录时判断用户角色,跳转到相应角色的首页,之后按照上述过程,在每个界面调用相应的导航栏即可。
底部导航栏实现
角色1
角色2
角色3
顶部导航
为了方便显示更多内容,有时候需要在界面顶部设置分页的tab,减少页面跳转。
这个的实现比较简单,通过设置两个顶部栏的点击事件,来控制顶部栏样式的改变和正文部分view的显示隐藏即可。微信小程序与网页不同,js改变样式、属性等,都是通过绑定js中的data来实现。
顶部和底部导航固定
由于正文部分高度不确定,因此页面的基本结构设置成:顶部和底部固定,中间部分滚动
基本框架
wxml
<view class='wraper'>
<view class='header'>header</view>
<view class='main'>
<scroll-view class='main-scroll' scroll-y style="height: 100%">
<view class='main-list'>
main
</view>
</scroll-view>
</view>
<view class='footer'>footer</view>
</view>
wxss
page{
width: 100%;
height:100%;
}
.wraper{
display: flex;
flex-direction: column;
width: 100%;
height:100%;
}
.main{
flex: 1;
position: relative;
}
.main-scroll{
position: absolute;
}
.main-list{
display: flex;
flex-wrap: wrap;
}
使用:将已经实现的顶部和底部导航放在框架的header和footer位置。