凸起底部导航栏微信小程序

### 创建自定义底部导航栏 #### 修改 `app.json` 文件配置 要实现自定义 tabBar 功能，在项目根目录下的 `app.json` 中设置 `"tabBar"` 字段为空对象或移除此字段，从而禁用默认的 tabBar[^1]。 ```json { "pages":[], "window":{ ... }, "tabBar": {} } ``` #### 构建自定义组件结构 创建一个新的 WXML 文件作为自定义 tabBar 组件模板。假设命名为 `custom-tab-bar.wxml`： ```html <view class="container"> <!-- 左侧按钮 --> <navigator url="/pages/index/index" open-type="switchTab" wx:if="{{currentPage !== 'index'}}"> <image src='/https/wenku.csdn.net/images/home.png'></image> <text>首页</text> </navigator> <!-- 凸起按钮 --> <navigator url="/pages/add/add" open-type="reLaunch" catchtap="handleAddTap"> <image src='/https/wenku.csdn.net/images/plus.png' style='margin-top:-20px;position:relative;top:50%;transform:translateY(-50%);z-index:999;'/> </navigator> <!-- 右侧按钮 --> <navigator url="/pages/user/user" open-type="switchTab" wx:if="{{currentPage !== 'user'}}"> <image src='/https/wenku.csdn.net/images/user.png'></image> <text>我的</text> </navigator> </view> ``` #### 添加样式支持 在对应的 WXSS 文件 (`custom-tab-bar.wxss`) 定义样式规则使布局美观并满足设计需求: ```css .container { display: flex; justify-content: space-around; align-items: center; height: 98rpx; background-color: white; box-shadow: 0 -1px 6px rgba(0,0,0,.1); } .navigator { text-align: center; } .navigator image { width: 40rpx; height: 40rpx; } .navigator text { font-size: 22rpx; color: gray; } ``` #### 实现逻辑交互 编写 JavaScript 文件处理页面间的跳转及其他事件响应(`custom-tab-bar.js`): ```javascript Component({ properties: { currentPage: String, }, methods: { handleAddTap() { console.log('点击了加号'); } } }) ``` #### 使用自定义组件 最后一步是在各个页面引入该自定义组件，并通过 page 的 json 配置文件指定当前显示哪个 tab 页面处于激活状态。 ```json // pages/index/index.json 或其他页面 JSON 配置 { "usingComponents": { "custom-tab-bar": "/components/custom-tab-bar" } } ``` ```html <!-- 在 wxml 文件中调用 --> <custom-tab-bar current-page="index"></custom-tab-bar> ``` 这样就完成了一个基本版的自定义 tabBar 制作过程[^3]。

### 实现中间凸起 Tabbar 导航栏 在 uni-app 开发的微信小程序中实现带有中间凸起按钮的底部导航栏，可以通过自定义 `tabBar` 并结合 CSS 和 JavaScript 来完成。以下是具体方法： #### HTML 结构 创建页面结构并引入必要的组件。 ```html <template> <view class="container"> <!-- 自定义 tabBar --> <view class="custom-tab-bar" :style="{ bottom: isTabFixed ? '0' : '-50px' }"> <navigator url="/pages/index/index" open-type="switchTab" hover-class="none" class="tab-item" :class="[currentPage === '/pages/index/index' ? 'active' : '']"> <image src="/static/tabbar/home.png"></image> <text>首页</text> </navigator> <navigator url="/pages/cart/cart" open-type="switchTab" hover-class="none" class="tab-item raised-button" @click="handleRaisedButtonClick()"> <image src="/static/tabbar/add.png"></image> </navigator> <navigator url="/pages/user/user" open-type="switchTab" hover-class="none" class="tab-item" :class="[currentPage === '/pages/user/user' ? 'active' : '']"> <image src="/static/tabbar/user.png"></image> <text>我的</text> </navigator> </view> <!-- 页面主体内容 --> <view class="page-content"> <!-- 这里放置页面的主要内容 --> </view> </view> </template> ``` #### 样式设计 通过 CSS 定义样式来使中间按钮呈现为圆形且突出显示。 ```css <style scoped> .custom-tab-bar { position: fixed; width: 100%; height: 50px; background-color: white; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 -2px 8px rgba(0, 0, 0, .1); } .tab-item { text-align: center; font-size: 12px; } .raised-button { position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%); border-radius: 50%; padding: 10px; background-color: #ff6f61; /* 颜色可根据需求调整 */ color: white; } </style> ``` #### JS逻辑处理 编写脚本控制当前选中的页面以及响应点击事件。 ```javascript <script> export default { data() { return { currentPage: getCurrentPages().pop().route, isTabFixed: true // 控制 tabBar 是否固定到底部 }; }, methods: { handleRaisedButtonClick() { console.log('Middle button clicked'); // 可在此处添加更多交互逻辑 } }, onLoad(options) { this.currentPage = options.page || '/'; } }; </script> ``` #### pages.json配置 确保在项目的 `pages.json` 文件内正确设置 tabBar 的路径和其他属性。 ```json { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", ... }, "tabBar": { "list": [ { ... }, // 对应于各个选项卡的信息对象数组 { "pagePath": "pages/middleButtonPage/middleButtonPage", // 中间按钮关联的页面路径 "iconPath": "/static/tabbar/add.png", "selectedIconPath": "/static/tabbar/add-active.png", "text": "" }, { ... } ], "color": "#9B9B9B", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff" } } ``` 上述代码片段展示了如何构建一个具有独特视觉效果的 tab bar，在其中央位置有一个特别设计过的按钮[^1]。此方案不仅适用于微信小程序环境下的应用开发，同时也能够很好地适配其他平台的需求[^2]。