微信小程序自定义tabbar中间按钮怎么实现？仿微信视频通话按钮的缩放与波纹动画教程

微信底部的tabbar中间有一个绿色的视频通话按钮，它和普通tab项不同：图标外面有一圈不断扩散消失的波纹，点击时整个按钮还会弹性缩放。这种设计能把用户的注意力引导到核心功能入口上，很多小程序在做电商、直播类产品时都会借鉴。这篇文章从零开始讲解如何在微信小程序中用自定义tabbar实现这种中间凸起按钮，重点拆解缩放动画和波纹动画的实现细节。

一、启用自定义tabbar的基础配置

要做出与众不同的中间按钮，前提是放弃原生tabbar，改用自定义组件。在app.json中把custom字段设置为true，同时仍然要声明tabBar的list（即便用自定义组件，这个list也是必需的，它决定了哪些页面属于tab页）：

{
  "tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#07C160",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/call/call",
        "text": "通话"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }
}

配置完成后，在项目根目录（与pages同级）新建一个custom-tab-bar文件夹，里面包含index.js、index.json、index.wxml、index.wxss四个文件。注意这个文件夹的名字是固定的，微信框架会自动识别并挂载它，写错名字组件不会生效。

有一个新手常踩的坑需要提前说明：自定义tabbar在每个tab页下面都会生成一份独立实例，切换页面时不会自动同步选中状态，需要在每个tab页的onShow里手动更新选中项，否则会出现两个tab同时高亮的情况。下面是tab页的通用写法：

Page({
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0 // 当前页面对应的索引
      });
    }
  }
});

二、中间凸起按钮的布局方案

布局上，tabbar整体是一个flex容器，中间按钮要向上凸出tabbar的边界。主流做法是让中间按钮的容器使用相对定位加负的bottom值，把按钮顶出tabbar高度之外，形成半悬浮效果。WXML结构如下：

<view class="tab-bar">
  <view class="tab-item" data-index="0" bindtap="switchTab">
    <image src="/images/home{{selected === 0 ? '-active' : ''}}.png"/>
    <text class="{{selected === 0 ? 'active' : ''}}">首页</text>
  </view>

  <view class="tab-item center-wrap" bindtap="onCenterTap">
    <view class="ripple-circle one"></view>
    <view class="ripple-circle two"></view>
    <view class="center-btn" style="transform: scale({{scale}});">
      <image src="/images/video.png"/>
    </view>
  </view>

  <view class="tab-item" data-index="2" bindtap="switchTab">
    <image src="/images/mine{{selected === 2 ? '-active' : ''}}.png"/>
    <text class="{{selected === 2 ? 'active' : ''}}">我的</text>
  </view>
</view>

对应的样式里，center-wrap不需要文字占位，只负责承载按钮；center-btn是那个绿色圆钮，通过bottom上移凸出；两个ripple-circle是波纹圈，叠在按钮下面。关键样式：

.tab-bar {
  display: flex;
  align-items: flex-end;
  height: 100rpx;
  background: #fff;
  border-top: 1rpx solid #e5e5e5;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.center-wrap {
  position: relative;
  align-items: center;
}
.center-btn {
  position: relative;
  z-index: 3;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: #07C160;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -50rpx; /* 凸出tabbar */
  box-shadow: 0 6rpx 16rpx rgba(7, 193, 96, 0.4);
}
.center-btn image {
  width: 52rpx;
  height: 52rpx;
}
.ripple-circle {
  position: absolute;
  top: -50rpx; /* 与按钮凸出位置对齐 */
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  border: 2rpx solid #07C160;
  z-index: 2;
}

凸出的高度一般取按钮直径的一半左右，视觉效果最自然。如果凸出太多，按钮会显得要掉下来；太少则失去设计感。另外别忘了处理iOS底部安全区，可以在tab-bar上加上padding-bottom: env(safe-area-inset-bottom)，否则在全面屏手机上tabbar会被home条压住。

三、波纹扩散动画的实现原理

波纹的本质是两个（或三个）圆圈从与按钮等大逐渐放大到1.5倍以上，同时透明度从1降到0，形成一圈圈向外扩散又消失的视觉效果。多层圆圈的关键在于让它们的动画延迟错开，比如第二个圈延迟0.1秒开始，这样任意时刻都有处于不同阶段的波纹存在，看起来是连续扩散的。

在WXSS里用@keyframes定义动画即可，不需要任何JS参与，性能也最好：

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
.ripple-circle.one {
  animation: ripple 1.6s ease-out infinite;
}
.ripple-circle.two {
  animation: ripple 1.6s ease-out infinite 0.8s;
}

这里有两个细节值得注意。第一是ease-out缓动，它让波纹在开始阶段扩散得快、接近消失时变慢，更符合真实波纹由强到弱的物理感受，如果用线性动画会显得机械。第二是动画时长和延迟的配比，两个圈的延迟差取时长的一半（1.6秒延迟0.8秒），扩散节奏最均匀；如果想更密集，可以加第三个圈并设置1.07秒左右的延迟。

还有一点容易忽略：transform: scale缩放的是圆圈本身，而圆圈的定位基准是自身左上角，直接缩放会导致圆心偏移。解决办法是给ripple-circle加上transform-origin: center（默认值就是center，但显式写出更保险），或者干脆用left: 50%; margin-left: -48rpx的方式居中定位，保证缩放时波纹始终从按钮圆心向外扩散。

四、点击缩放动画与页面跳转

点击时按钮先缩小再弹回原状，这个效果用JS控制一个scale变量最直接。按下时把scale设为0.85，松开后设回1，配合transition就能做出弹性回弹。JS逻辑：

Component({
  data: {
    selected: 0,
    scale: 1
  },
  methods: {
    onCenterTap() {
      // 先缩放再跳转，提升点击反馈
      wx.navigateTo({
        url: '/pages/video-call/video-call'
      });
    },
    onCenterTouchStart() {
      this.setData({ scale: 0.85 });
    },
    onCenterTouchEnd() {
      this.setData({ scale: 1 });
    },
    switchTab(e) {
      const index = e.currentTarget.dataset.index;
      const path = '/pages/index/index';
      wx.switchTab({ url: path });
      this.setData({ selected: index });
    }
  }
});

WXML中给按钮绑定bindtouchstart和bindtouchend，样式里给center-btn加上transition: transform 0.15s ease-out，一个流畅的按压效果就完成了。如果想做更Q弹的回弹，可以把transition换成CSS动画，用@keyframes定义0.85到1.06再到1的三段变化，模拟弹簧的过冲回落。

关于中间按钮的跳转方式要特别留意：如果视频通话页是一个普通页面（非tab页），必须用wx.navigateTo跳转，这样页面从底部滑入，用户关闭后还能回到原来的tab页；如果把它配置成了tab页再搭配凸起按钮，点击时用wx.switchTab，但要处理好selected的更新。另外波纹动画建议只在首页等核心场景开启，如果用户停留在通话相关页面，可以通过一个data变量控制波纹的display，避免动画持续运行消耗性能。

最后补充一点优化建议：波纹和缩放都是纯transform/opacity动画，由GPU合成层渲染，几乎不占用主线程，即使低端机也能流畅运行。真正要避免的是用width、height做动画，那会触发大量重排。按照本文的方案实现下来，你的小程序就能得到一个和微信视频通话入口几乎一致的tabbar中间按钮了。

微信小程序自定义tabbar小程序tabbar中间按钮波纹动画修改时间：2026-09-14 11:59:25