html导航栏代码跳转,微信小程序自定义底部导航栏tabBar（含跳转页面wx.navigateTo）...

一.app.json配置

这里配置

{"pages": ["pages/usersLists/usersLists","pages/addMember/addMember","pages/mine/mine"],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#F1F1F1","navigationBarTitleText": "test","navigationBarTextStyle": "black"},"tabBar": {"custom": true,"color": "#535353","selectedColor": "#000000","backgroundColor": "#ffffff","list": [

{"pagePath": "pages/usersLists/usersLists","text": "用户"},

{"pagePath": "pages/mine/mine","text": "个人"}

]

},"usingComponents": {"header": "components/header/header","add-icon": "components/add-icon/add-icon"},"sitemapLocation": "sitemap.json"}

二.自定义tabBar

**官方示例标签是cover-view来确保tabbar的层级，但是我这里要用到iconfont，遗憾的是cover-view不支持iconfont，所以我这里用的普通的view。如果iconfont不是必须的，换成cover-view更好。

//custom-tab-bar/custom-tab-bar.js

Component({/**

* 组件的属性列表*/properties: {

},/**

* 组件的初始数据*/data: {

selected:0,

color:"#535353",

selectedColor:"rgb(131,175,155)",

list: [{

pagePath:"/pages/usersLists/usersLists",

iconPath:"iconyonghu"}, {

pagePath:"/pages/mine/mine",

iconPath:"icongerenzhongxinxuanzhong"}]

},/**

* 组件的方法列表*/methods: {

changeTab(e) {

let { index, url}=e.currentTarget.dataset;

let { selected }= this.data;if (selected === index) return;

wx.switchTab({

url

})this.setData({ selected: index })

}

}

})

/*custom-tab-bar/custom-tab-bar.wxss*/@import "../style/iconfont.wxss";

.tab-bar{height:150rpx;background-color:#ffffff;display:flex;align-items:center;justify-content:space-between;

}.tab-icon{display:flex;align-items:center;justify-content:center;width:33.33%;height:100%;font-size:70rpx;color:#535353;

}.active{color:rgb(131,175,155);

}

2.在tabbar页面onShow部分加入如下代码

//miniprogram/pages/usersLists/usersLists.js

onShow: function() {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({

selected:0 //数字是当前页面在tabbar的索引

})

}

}

// miniprogram/pages/mine/mine.js

onShow: function() {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({

selected:1 //数字是当前页面在tabbar的索引})

}

}

可以看到我这里有两个tabbar页面：usersLists和mine。有时候我们会遇到这样一个设计：点击tabbar中的按钮打开一个page(发生页面跳转)，按照官方的例子是做不到的。在custom-tab-bar/index中是无法wx.navigateTo跳转的，只能switchTab，比如我在tabbar中间要加一个icon，用来跳转到addMember页面，此时不能加到custom-tab-bar/index中，因此，我们得写一个组件，放在每个tabbar页面中，然后通过样式调整，覆盖在tabbar上。

3.新建覆盖在tabbar上的icon组件：add-icon

/*components/add-icon/add-icon.wxss*/@import "../../style/iconfont.wxss";

.add-icon{flex:1;height:100%;display:flex;align-items:center;justify-content:center;font-size:70rpx;color:#535353;

}.active{color:rgb(131,175,155);

}

//components/add-icon/add-icon.js

Component({/**

* 组件的属性列表*/properties: {

},/**

* 组件的初始数据*/data: {

},/**

* 组件的方法列表*/methods: {

goAddPage(){

wx.hideTabBar();

wx.navigateTo({

url:'/pages/addMember/addMember',

})

}

}

})

附app.wxss

/**app.wxss**/@import "style/iconfont.wxss";

.false-tab-icon{display:flex;align-items:center;justify-content:center;position:fixed;bottom:0;z-index:99999;width:33.33%;height:150rpx;

}page{height:100%;

}.container{height:100%;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;

}button{background:initial;

}button:focus{outline:0;

}button::after{border:none;

}.artic{width:100%;flex:1;background-color:#f4f4f4;

}.my-head{width:100%;

}.page-title{width:100%;margin-top:18rpx;text-align:center;font-weight:500;font-size:32rpx;

}