在微信小程序开发中，选项卡（窗口底部TabBar）是一个重要的功能组件，它提供了一种直观的用户界面，用于在不同的页面之间进行切换。TabBar通常位于应用的底部，显示为一排图标或文字，用户点击后可以快速跳转到对应的页面。本文将详细介绍如何在微信小程序中设置和实现TabBar页面切换。
我们需要在`app.json`配置文件中定义TabBar的相关设置。`app.json`是小程序全局配置文件，用于定义小程序的页面结构、样式、以及全局配置等。以下是一个基本的`app.json`示例：
```json
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/catalogue/catalogue",
"pages/mine/mine"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#999999",
"navigationBarTitleText": "tab",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#ccc",
"selectedColor": "#35495e",
"borderStyle": "white",
"backgroundColor": "#f9f9f9",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "images/home.png",
"selectedIconPath": "images/home-actived.png"
},
{
"text": "目录",
"pagePath": "pages/catalogue/catalogue",
"iconPath": "images/note.png",
"selectedIconPath": "images/note-actived.png"
},
{
"text": "我的",
"pagePath": "pages/mine/mine",
"iconPath": "images/profile.png",
"selectedIconPath": "images/profile-actived.png"
}
]
}
}
```
在这个配置中，`pages`数组定义了小程序包含的页面路径。`window`对象则用于设置每个页面的基本样式。重点在于`tabBar`对象，它包含了TabBar的样式属性和页面列表：
1. `color`：未选中状态下的图标和文字颜色。
2. `selectedColor`：选中状态下的图标和文字颜色。
3. `borderStyle`：TabBar边框的颜色。
4. `backgroundColor`：TabBar背景色。
5. `list`：一个数组，定义了TabBar上的各个选项。每个选项包含：
- `text`：选项的文字描述。
- `pagePath`：点击该选项后跳转的页面路径。
- `iconPath`：未选中状态下的图标路径。
- `selectedIconPath`：选中状态下的图标路径。
微信小程序规定，TabBar最多可以有5个选项，最少需要2个。每个选项的图标大小应控制在40KB以内，以确保加载速度。
在`pages`目录下，按照配置文件中的`pagePath`创建相应的页面文件。例如，`pages/index/index`对应“首页”页面，`pages/catalogue/catalogue`对应“目录”页面，`pages/mine/mine`对应“我的”页面。每个页面文件中，可以编写对应的业务逻辑和UI布局。
在页面文件中，可以通过监听`onShow`和`onHide`生命周期函数来判断当前页面是否被选中，从而实现TabBar的高亮效果。例如，在`index.js`中：
```javascript
Page({
onShow() {
// 当页面显示时，可以设置TabBar选中状态
wx.setTabBarItem({
index: 0,
selected: true
});
},
onHide() {
// 当页面隐藏时，取消选中状态
wx.setTabBarItem({
index: 0,
selected: false
});
}
})
```
这样，当用户在选项卡之间切换时，不仅页面内容会更新，TabBar也会相应地改变选中状态，为用户提供清晰的导航指示。
总结来说，微信小程序中的选项卡（TabBar）页面切换通过在`app.json`中配置TabBar的样式和页面列表，并在每个页面文件中处理选中状态，实现了一个直观且易于操作的导航机制。正确理解和使用这一功能，可以极大地提升小程序的用户体验。
