微信小程序button凸起按钮

### 微信小程序 Button 凸起效果实现 #### 使用自定义 TabBar 组件创建凸起按钮 为了实现在微信小程序中底部导航栏的凸起按钮效果，可以利用自定义 `TabBar` 组件来完成这一设计目标[^1]。通过这种方式不仅可以使中间位置的按钮具有视觉上的突出感，还可以确保整个界面交互体验更加流畅。 #### 自定义样式与布局调整 对于希望达到的圆形或椭圆形状并带有阴影效果的凸起按钮，在编写 `.wxml` 文件时应先构建好基本结构： ```html <view class="custom-tab-bar"> <!-- 左侧普通 tab --> <block wx:for="{{list}}" wx:key="*this"> <navigator url="{{item.pagePath}}" open-type="switchTab" hover-class="none" style="flex-basis: {{index === list.length / 2 ? '0' : ''}};"> <image src="{{item.iconPath}}" /> <text>{{item.text}}</text> </navigator> </block> <!-- 中间特殊处理的凸起按钮 --> <cover-view class="center-button-container"> <cover-image bindtap="onCenterButtonClick" src="/images/plus.png"></cover-image> </cover-view> </view> ``` 接着是在对应的 `.wxss` 文件里定义具体的 CSS 样式规则，这里特别注意要给中心按钮添加合适的定位属性以及边框半径使其呈现为圆形，并适当增加一些阴影效果增强立体感： ```css /* 定义整体 tab bar 的高度 */ .custom-tab-bar { position: fixed; bottom: 0; width: 100%; height: 98rpx; /* 可根据实际需求修改 */ } .center-button-container { position: absolute; top: -36rpx; /* 让按钮部分超出顶部边界形成凸起 */ left: calc(50% - 48rpx); /* 居中显示 */ z-index: 9; image { display: block; margin-left: auto; margin-right: auto; border-radius: 50%; /* 圆形 */ box-shadow: 0 4px 8px rgba(0, 0, 0, .2), 0 6px 20px rgba(0, 0, 0, .1); background-color: white; padding: 12rpx; transition: all .3s ease-in-out; } } ``` 上述代码片段展示了如何在一个标准的小程序页面中嵌入一个位于屏幕下方中央位置且略微向上浮动的圆形按钮。当用户点击此按钮时会触发相应的事件处理器函数 `onCenterButtonClick()` 来执行特定逻辑操作。 #### 动态更新与性能优化 考虑到用户体验方面的要求，该方案还强调了全局插件的设计理念——即自定义的 `TabBar` 只需首次加载渲染一次（后续没有任何加载开销）。这有助于减少不必要的资源消耗，提高应用程序的整体响应速度和稳定性。