微信小程序 动态修改tabbar

要设置动态的tabbar，你需要在页面的onShow生命周期函数中动态修改tabbar的配置。以下是一个简单的示例代码： ```javascript // 在页面的onShow函数中动态修改tabbar配置 onShow() { // 获取当前页面路由 const route = getCurrentPages()[getCurrentPages().length - 1].route // 判断当前页面是否需要显示动态tabbar if (route === 'pages/index/index') { // 显示动态tabbar uni.showTabBar({ aniamtion: true }) uni.setTabBarStyle({ selectedColor: '#ff0000' }) uni.setTabBarItem({ index: 0, text: '首页', iconPath: '/static/tabbar/home.png', selectedIconPath: '/static/tabbar/home-active.png' }) uni.setTabBarItem({ index: 1, text: '动态', iconPath: '/static/tabbar/dynamic.png', selectedIconPath: '/static/tabbar/dynamic-active.png' }) } else { // 隐藏动态tabbar uni.hideTabBar({ aniamtion: true }) } } ``` 在这个示例中，我们假设首页需要显示动态tabbar，而其他页面不需要。在首页的onShow函数中，我们通过getCurrentPages()函数获取当前页面的路由，然后判断是否是首页，如果是，则动态修改tabbar的配置，显示动态tabbar；如果不是，则隐藏动态tabbar。 需要注意的是，因为微信小程序的限制，只有在tabbar的某个页面的onShow函数中才能修改tabbar的配置，否则会导致设置无效。

### 微信小程序实现整体弧形TabBar 为了实现在微信小程序中的整体弧形 TabBar 设计，通常需要自定义底部导航栏。由于默认的小程序 TabBar 不支持直接设置成圆角或复杂形状，因此解决方案涉及隐藏原生 TabBar 并通过页面组件模拟一个具有所需样式的替代品。 #### 自定义 Arc-shaped TabBar 的方法： 1. **配置 app.json 文件** 修改 `app.json` 中 `"tabBar"` 字段为空对象来禁用默认样式，同时启用 custom-tab-bar 属性指向新的 WXML 组件路径。 2. **创建 Custom Component (WXML & WXSS)** 构建一个新的 WXML 和对应的 WXSS 来绘制所需的图形效果。这里会利用到 CSS3 的 border-radius 属性以及可能的 SVG 图像或者其他矢量绘图技术来形成完美的半圆形按钮区域。 3. **JavaScript 逻辑处理** 使用 JavaScript 控制点击事件响应并切换不同页面视图之间的交互行为。 下面是一个简单的例子展示如何构建这样的布局结构： ```json { "window": { ... }, "tabBar": {}, "usingComponents": {} } ``` ```html <!-- /components/custom-tab-bar.wxml --> <view class="custom-tab-bar"> <!-- 左侧图标列表 --> <block wx:for="{{tabs}}" wx:key="pagePath"> <navigator url='{{item.pagePath}}' hover-class="none" class="tab-item {{currentPage === item.pagePath ? 'active' : ''}}"> <image src="{{item.iconPath}}" /> <text>{{item.text}}</text> </navigator> </block> <!-- 中间凸起部分 --> <view class="center-button-container"> <button bindtap="handleCenterButtonClick">+</button> </view> </view> ``` ```css /* components/custom-tab-bar.wxss */ .custom-tab-bar { position: fixed; bottom: 0; width: 100%; height: 98rpx; /* 高度可以根据实际需求调整 */ padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: space-around; align-items: center; background-color: white; } .tab-item { flex-grow: 1; text-align: center; } .center-button-container { position: absolute; top: -40rpx; /* 调整此值使按钮突出于顶部 */ left: calc(50% - 40rpx); /* 让它居中 */ z-index: 10; .center-button { width: 80rpx; height: 80rpx; line-height: 80rpx; font-size: 40rpx; color: #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, .1); background-color: themeColor; } } ``` 上述代码片段展示了如何创建一个带有一个中心浮动按钮的整体弧形 TabBar[^1]。