小程序自定义模板导航

一、

pages同级目录新建tabbar.wxml

在全局app.js中配置

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

});

},

globalData: {

userInfo: null,

tabBar: {

color: "#a9b7b7",

selectedColor: "#11cd6e",

borderStyle: "white",

list: [

{

selectedIconPath: "/image/roomres1.png",

iconPath: "/image/roomres.png",

pagePath: "/pages/welcome/roomres/roomres",

text: "订房",

clas: "menu-item",

selected: true

},

{

selectedIconPath: "/image/topselling1.png",

iconPath: "/image/topselling.png",

pagePath: "/pages/welcome/topselling/topselling",

text: "爆品",

clas: "menu-item",

selected: false

},

{

selectedIconPath: "/image/questionnaire1.png",

iconPath: "/image/questionnaire.png",

pagePath: "/pages/welcome/socialreaserch/socialreaserch",

text: "调研",

clas: "menu-item",

selected: false

},

{

selectedIconPath: "/image/local1.png",

iconPath: "/image/local.png",

pagePath: "/pages/welcome/local/local",

text: "当地",

clas: "menu-item",

selected: false

},

{

selectedIconPath: "/image/mine1.png",

iconPath: "/image/mine.png",

pagePath: "/pages/welcome/mine/mine",

text: "我的",

clas: "menu-item",

selected: false

}

],

position: "bottom"

}

}

全局配置app.wxss中配置导航栏的样式

.menu-item{

width: 20%;

float: left;

text-align: center;

padding-top: 8px;

}

.img{

width: 23px;

height: 23px;

display: block;

margin:auto;

}

.clear{

clear: both;

}

.tab-bar{

background-color: white;

position: fixed;

width: 100%;

/* padding: 0px 2%; */

}

二、

1、在需要显示模板导航的.wxml页面配置

导入模板