小程序tabBar示例

在微信小程序开发中，`tabBar` 是一个非常重要的组件，它是页面底部的导航栏，用于展示主要的页面切换选项。本示例将详细介绍如何在小程序中实现自定义的`tabBar`，并提供两种模式供参考。开发者可以根据项目的具体需求调整样式，以满足不同设计风格的要求。 我们要理解小程序的`app.json`配置文件。在这个文件中，`tabBar` 部分是定义全局`tabBar`的地方。以下是一个基础的`tabBar`配置示例： ```json { "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/icon_home.png", "selectedIconPath": "images/icon_home_selected.png" }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "images/icon_logs.png", "selectedIconPath": "images/icon_logs_selected.png" } ] } } ``` 上述配置中，`color` 和 `selectedColor` 分别表示未选中和选中时文字的颜色，`borderStyle` 定义了边框颜色。`list` 则是一个数组，包含了每个`tabBar`项的具体配置，如页面路径、图标等。 在自定义`tabBar`时，我们通常会通过修改`app.json`中的`custom`属性来开启自定义模式，例如： ```json { "tabBar": { "custom": true, ... } } ``` 开启自定义模式后，你需要在项目的`globalStyle`中定义`tabBar`的样式，并在每个对应的页面文件夹下创建一个`tabBar`的`json`配置文件，用来指定当前页面在`tabBar`中的显示内容。 例如，对于`tabbar2`和`tabbar`这两个子文件夹，我们可以分别在它们的`json`配置文件中定义各自的`tabBar`样式和内容： ```json // tabbar2/json { "navigationBarTitleText": "模式一", "backgroundColor": "#fff", "backgroundTextStyle": "light", "tabBar": { "items": [ { "pagePath": "tabbar2/index", "text": "首页", "iconPath": "images/tabbar2/home.png", "selectedIconPath": "images/tabbar2/home_selected.png" }, { "pagePath": "tabbar2/logs", "text": "日志", "iconPath": "images/tabbar2/logs.png", "selectedIconPath": "images/tabbar2/logs_selected.png" } ] } } // tabbar/json { "navigationBarTitleText": "模式二", "backgroundColor": "#fff", "backgroundTextStyle": "light", "tabBar": { "items": [ { "pagePath": "tabbar/index", "text": "首页", "iconPath": "images/tabbar/home.png", "selectedIconPath": "images/tabbar/home_selected.png" }, { "pagePath": "tabbar/logs", "text": "日志", "iconPath": "images/tabbar/logs.png", "selectedIconPath": "images/tabbar/logs_selected.png" } ] } } ``` 这样，我们就可以在不同的页面之间切换，并看到根据配置改变的`tabBar`样式。 在实际项目中，你可能还需要对`tabBar`的样式进行更复杂的定制，例如添加阴影效果、改变文字大小和位置、动态加载图标等。这可以通过在`app.wxss`中设置`custom-tab-bar`的类名来实现。例如： ```css .custom-tab-bar { background-color: #fff; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12); } .custom-tab-bar .weui-tab__hd { height: 50px; } .custom-tab-bar .weui-tab__bd-item { padding-top: 10px; } .custom-tab-bar .weui-tab__bd-item__icon { width: 26px; height: 26px; } ``` 微信小程序的`tabBar`提供了丰富的自定义选项，让开发者能够根据项目需求打造出个性化的底部导航栏。通过理解`app.json`和`globalStyle`的配置，以及`wxss`样式调整，你可以轻松实现各种视觉效果。在这个示例中，`tabbar2`和`tabbar`两个子文件夹分别展示了不同的`tabBar`模式，开发者可以在此基础上进行拓展和优化，以满足实际应用的需求。