在小程序中,底部导航栏是一种常见的页面导航形式,可以方便用户在不同的页面之间切换。本文将介绍如何使用小程序提供的组件和API实现底部导航栏功能。
1. 创建底部导航栏
小程序提供了<navigator>
和<view>
组件来实现底部导航栏布局。我们可以在app.json文件中配置底部导航栏的样式和页面路径。
首先,在app.json文件中添加tabBar
字段,并设置list
属性为一个包含每个tab的数组,每个tab需要设置pagePath
、text
和iconPath
属性。
示例代码:
{
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "images/home.png",
"selectedIconPath": "images/home-selected.png"
},
{
"pagePath": "pages/discover/discover",
"text": "发现",
"iconPath": "images/discover.png",
"selectedIconPath": "images/discover-selected.png"
},
{
"pagePath": "pages/profile/profile",
"text": "我",
"iconPath": "images/profile.png",
"selectedIconPath": "images/profile-selected.png"
}
]
}
}
在上述代码中,我们定义了3个tab,分别对应3个页面,使用了selectedIconPath
属性来设置tab选中时的图标。
2. 创建底部导航栏所需页面
接下来,我们需要创建底部导航栏所需的页面。可以在pages目录中创建对应的文件夹和页面文件。
示例代码:
pages/
├── home/
│ ├── home.js
│ ├── home.wxml
│ └── home.wxss
├── discover/
│ ├── discover.js
│ ├── discover.wxml
│ └── discover.wxss
└── profile/
├── profile.js
├── profile.wxml
└── profile.wxss
每个页面的文件中可以添加页面的逻辑、布局和样式。
3. 切换页面
当用户点击底部导航栏时,需要切换到相应的页面。小程序提供了wx.switchTab()
方法用于切换到底部导航栏页面,并且跳转后会关闭其他非底部导航栏页面。
可以在底部导航栏页面的事件中调用wx.switchTab()
方法进行页面切换。
示例代码:
// home.js
Page({
navigateToDiscover() {
wx.switchTab({
url: '/pages/discover/discover'
});
},
navigateToProfile() {
wx.switchTab({
url: '/pages/profile/profile'
});
}
// ...
});
在上述代码中,我们定义了两个方法,分别用于切换到discover
和profile
页面。
4. 设置当前选中的tab
当用户切换页面时,我们需要在底部导航栏中标识出当前选中的tab。小程序提供了wx.getStorageSync()
方法用于获取本地存储的数据,我们可以在页面的生命周期函数中通过判断路径来设置当前选中的tab。
示例代码:
// app.js
App({
onLaunch: function () {
const currentPages = getCurrentPages();
const currentPagePath = currentPages[currentPages.length - 1].route;
const tabBarList = wx.getStorageSync('tabBarList');
tabBarList.forEach(tab => {
tab.selected = tab.pagePath === currentPagePath;
});
wx.setStorageSync('tabBarList', tabBarList);
}
// ...
});
在上述代码中,我们在小程序的生命周期函数onLaunch
中获取当前页面路径,并通过判断与tabBarList中的pagePath进行对比来设置是否选中。
5. 样式定制
最后,我们可以根据自己的需求对底部导航栏的样式进行定制。可以在各个页面的wxss文件中设置导航栏的样式,并使用selected
属性来切换选中时的样式。
示例代码:
/* home.wxss */
.page {
background-color: #f2f2f2;
}
.tab-bar {
display: flex;
align-items: center;
justify-content: space-around;
height: 64px;
background-color: #fff;
border-top: 1px solid #ddd;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tab-text {
font-size: 12px;
margin-top: 6px;
}
.tab-icon {
width: 24px;
height: 24px;
}
.tab-icon-selected {
color: #007aff;
}
在上述代码中,我们设置了导航栏的布局、样式和颜色。
这样,我们就完成了小程序中底部导航栏的实现。通过配置app.json文件、创建底部导航栏所需页面、切换页面和样式定制,我们可以实现一个功能完善、美观的底部导航栏。
希望本文对你学习小程序底部导航栏的实现有所帮助!
注意:本文归作者所有,未经作者允许,不得转载