微信小程序底部选项卡/导航栏实现方法

今天必须要写这篇文章，太坑了！微信小程序底部选项卡/导航栏的实现方法！

不过还是总结的说，就不说我经历了什么了。。

首先，在历经我一系列改革之后写出来的代码

//nav_tp.wxml
<template name="nav">
<view class="nav_container">
<navigator wx:for="{{navbar}}" data-idx="{{index}}" url="{{item.url}}" open-type="redirect" class="function-text {{currentTab==index ? 'present' : ''}}">{{item.name}}</navigator>
</view>
</template>

//nav_tp.wxss
/*固定导航栏css*/

.nav_container {
display: flex;
flex-direction: row;
width: 100%;
height: 50px;
padding: 0;
/*看控制台发现padding不为0*/
background-color: #e44;
position: fixed;
bottom: 0;
text-align: center;
}

.function-text {
padding: 0 10px;
margin: 9px auto 7px;
font-size: 20px;
color: #fff;
line-height: 32px;
}

.present {
border-bottom: 2px solid #fff;
}

//common.js
var navbar=[
{
name: '发红包',
url: "/pages/home/home"
},
{
name: "抢红包",
url: "/pages/snatch/snatch"
},
{
name: "我的红包",
url: "/pages/myPage/mine"
}
]
//哎呀，这里之前写差一个s，然后一直拿不到数据，苦死我，广大网友别学我
module.exports = {
navbar: navbar
}

然后再导入

//引用模板的js文件之一
var common=require("../common.js");

Page({
data: {
navbar: common.navbar,
currentTab: 0//三个文件这里依次为0，1，2，其他地方一样
}
})

//引用模板的css文件
@import "../template/nav_tp.wxss";

//引用模板的html文件
<import src="../template/nav_tp.wxml"/>
<!--注意一定要在这里再传一次参数！！否则拿过来的信息是空的，因为渲染时没有拿到数据，而include不会渲染，相当于copy过来-->
<template is="nav" data="{{navbar,currentTab}}"></template>

上面就是我实现的方法，然后不一会儿我就发现！！！小程序它已经帮我们写好这个东东了，只要在app.json中配置一下就ok了，你也可以看一下官网

//app.json
"tabBar": {
"borderStyle":"#e44",
"backgroundColor":"#e44",
"color":"#000",
"selectedColor":"#ff0",
"list": [
{
"pagePath": "pages/home/home",
"text": "发红包",
"iconPath":"image/give.png",
"selectedIconPath":"image/give-hl.png"
},
{
"pagePath": "pages/snatch/snatch",
"text": "抢红包",
"iconPath": "image/snatch.png",
"selectedIconPath": "image/snatch-hl.png"
},
{
"pagePath": "pages/myPage/mine",
"text": "我的红包",
"iconPath": "image/mine.png",
"selectedIconPath": "image/mine-hl.png"
}
]
}

不过要注意一点，从没有选项卡跳到有选项卡要用wx.switchTab。

ok，这个故事告诉我们要多看看API。