1. 在小程序的全局配置文件 app.json 中配置 tabBar。
{
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/tab_home.png",
"selectedIconPath": "images/tab_home_selected.png"
},
{
"pagePath": "pages/about/about",
"text": "关于",
"iconPath": "images/tab_about.png",
"selectedIconPath": "images/tab_about_selected.png"
}
]
}
}
在上述配置中，tabBar 的 list 属性包含了多个对象，每个对象代表一个选项卡。其中：
- pagePath 指定了对应选项卡的页面路径。
- text 是选项卡的文字。
- iconPath 是未选中时的图标路径。
- selectedIconPath 是选中时的图标路径。
2. 在每个对应的页面的 JSON 配置文件中配置 navigationBarTitleText 用于设置页面标题。
{
"navigationBarTitleText": "首页"
}
3. 在页面的 WXML 文件中添加页面内容。
4. 在页面的 JS 文件中处理相关逻辑。
以上是基本的使用步骤。在实际开发中，你还可以通过 color、backgroundColor、borderStyle 等属性来调整 tabBar 的样式。同时，小程序提供了 wx.switchTab 方法用于切换到 tabBar 中的某个页面。
// 示例：在某个事件触发时切换到 tabBar 中的某个页面
wx.switchTab({
url: '/pages/about/about'
});
转载请注明出处：http://www.zyzy.cn/article/detail/1019/微信小程序