在wpye中使用自定义tabBar

### wpye 自定义 TabBar 实现方法 在 wpye 框架中实现自定义 `TabBar` 是一种常见的需求，可以通过配置文件和页面组件的方式完成。以下是详细的实现过程： #### 1. 配置 `app.json` 在项目的根目录下找到 `app.json` 文件，在其中设置 `tabBar` 属性来自定义底部导航栏。 ```json { "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "assets/images/home.png", "selectedIconPath": "assets/images/home-active.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "assets/images/cart.png", "selectedIconPath": "assets/images/cart-active.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "assets/images/user.png", "selectedIconPath": "assets/images/user-active.png" } ], "custom": true, "color": "#999", "selectedColor": "#3cc51f", "backgroundColor": "#fff", "borderStyle": "black" } } ``` 在此配置中，`custom: true` 表示启用自定义 tabBar 功能[^6]。 --- #### 2. 创建自定义 TabBar 组件 为了完全掌控 TabBar 的样式和交互逻辑，可以创建一个独立的组件来替代默认的 TabBar。 ##### (a) 新建组件文件夹 在项目中新建一个名为 `components/custom-tab-bar` 的文件夹，并在其内部创建以下文件： - `custom-tab-bar.wxml` - `custom-tab-bar.wxss` - `custom-tab-bar.js` ##### (b) 编写 WXML 结构 在 `custom-tab-bar.wxml` 中编写 HTML 结构，模拟 TabBar 的布局。 ```html <view class="tab-bar"> <block wx:for="{{ list }}" wx:key="*this"> <view class="tab-item" bindtap="switchTab" data-path="{{ item.pagePath }}"> <image src="{{ currentIndex === index ? item.selectedIconPath : item.iconPath }}"></image> <text style="color: {{currentIndex === index ? selectedColor : color}}">{{item.text}}</text> </view> </block> </view> ``` ##### (c) 添加 WXSS 样式 在 `custom-tab-bar.wxss` 中定义 TabBar 的外观。 ```css .tab-bar { display: flex; position: fixed; bottom: 0; width: 100%; height: 100px; background-color: white; border-top: 1px solid #ccc; } .tab-item { flex: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; } .tab-item image { width: 40px; height: 40px; } .tab-item text { font-size: 12px; } ``` ##### (d) 定义 JS 逻辑 在 `custom-tab-bar.js` 中处理点击事件并切换页面。 ```javascript Component({ properties: { list: { type: Array, value: [] }, // 接收父级传递的数据 currentIndex: { type: Number, value: 0 } // 当前选中的索引 }, methods: { switchTab(e) { const url = e.currentTarget.dataset.path; if (!url.startsWith('/')) return; wx.switchTab({ url }); this.triggerEvent('change', { index: e.currentTarget.index }); // 向父级发送事件通知 } } }); ``` --- #### 3. 使用自定义 TabBar 在需要显示 TabBar 的页面中引入该组件，并绑定数据。 ##### (a) 修改页面 JSON 确保当前页面被包含在 `tabBar.list` 中。 ##### (b) 引入组件到页面 编辑目标页面的 `.wxml` 和 `.js` 文件。 ###### 页面结构 (`index.wxml`) ```html <custom-tab-bar list="{{ tabList }}" current-index="{{ currentIndex }}" bind:change="onTabChange" ></custom-tab-bar> ``` ###### 页面逻辑 (`index.js`) ```javascript Page({ data: { tabList: [ { pagePath: 'pages/index/index', iconPath: '/images/home.png', selectedIconPath: '/images/home-active.png', text: '首页' }, { pagePath: 'pages/cart/cart', iconPath: '/images/cart.png', selectedIconPath: '/images/cart-active.png', text: '购物车' }, { pagePath: 'pages/user/user', iconPath: '/images/user.png', selectedIconPath: '/images/user-active.png', text: '我的' } ], currentIndex: 0 }, onTabChange(e) { this.setData({ currentIndex: e.detail.index }); } }); ``` --- ### 总结 通过以上步骤，可以在 wpye 框架中成功实现自定义 TabBar。这种方法不仅允许开发者自由设计 TabBar 的样式，还能够灵活响应用户的操作行为[^7]。 ---