类比大麦网的底部导航栏作为案例来书写流程：
建立如下文件夹：（标红为底部导航栏的导航文件夹，某些需要新建）
在app.json中添加如下代码：
整体代码为：
{
"pages": [
"pages/index/index",
"pages/scene/scene",
"pages/member/member",
"pages/wallet/wallet",
"pages/mine/mine"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "有洁癖的懒羊羊",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "精选",
"iconPath": "pages/images/index.png",
"selectedIconPath": "pages/images/index-active.png"
},
{
"pagePath": "pages/scene/scene",
"text": "现场",
"iconPath": "pages/images/scene.png",
"selectedIconPath": "pages/images/scene-active.png"
},
{
"pagePath": "pages/member/member",
"text": "会员",
"iconPath": "pages/images/member.png",
"selectedIconPath": "pages/images/member-active.png"
},
{
"pagePath": "pages/wallet/wallet",
"text": "票夹",
"iconPath": "pages/images/wallet.png",
"selectedIconPath": "pages/images/wallet-active.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "pages/images/mine.png",
"selectedIconPath": "pages/images/mine-active.png"
}
]
}
}在images文件夹中分别添加被选中和未被选中的图片：
在index.wxml中添加点击跳转代码：
<view class="container">
精选
<navigator url="/pages/scene/scene" open-type="switchTab">点击跳转</navigator>
<button bindtap='jumpPage'>跳转页面</button>
</view>在index.js中添加点击跳转代码：
// index.js
Page({
jumpPage:function() {
wx.switchTab({
url: '/pages/member/member'
})
}
})
最终结果界面：
