微信小程序tab切换时下划线动画效果

微信小程序的tab切换时下划线动画效果可以通过使用动画组件和样式设置来实现。首先，在wxml文件中，我们可以使用 `<view>` 元素来创建一个下划线，并给它一个唯一的id，例如：

<view id="underline"></view>

然后，在wxss文件中，我们可以为这个下划线设置初始样式，例如设置宽度、高度、颜色和定位等属性。

#underline {
  position: absolute;
  bottom: 0;
  height: 2rpx;
  background-color: #FF0000; /* 设置下划线的颜色 */
  width: 100rpx; /* 设置初始宽度 */
  transition: all 0.3s ease-out; /* 设置过渡动画效果 */
}

接下来，在js文件中，我们可以通过监听tab切换的事件来改变下划线的位置和宽度，以实现动画效果。

Page({
  data: {
    activeTab: 1 // 当前活动的tab索引
  },
  onTabChange(event) {
    const { index } = event.detail;
    const query = wx.createSelectorQuery().in(this);
    query
      .select(`#tab-${index}`)
      .boundingClientRect(rect => {
        const underline = wx.createSelectorQuery().select('#underline');
        underline
          .boundingClientRect(underlineRect => {
            underline
              .scrollOffset(res => {
                const left = rect.left + res.scrollLeft;
                const width = rect.width;
                // 更新下划线的位置和宽度
                this.setData({
                  underlineLeft: `${left}px`,
                  underlineWidth: `${width}px`,
                  activeTab: index
                });
              })
              .exec();
          })
          .exec();
      })
      .exec();
  }
});

最后，在wxml文件中，我们可以动态绑定下划线的位置和宽度属性，实现动态显示效果。

<view class="tab" id="tab-0" bindtap="onTabChange" data-index="0">Tab 1</view>
<view class="tab" id="tab-1" bindtap="onTabChange" data-index="1">Tab 2</view>
<view class="tab" id="tab-2" bindtap="onTabChange" data-index="2">Tab 3</view>
<view id="underline" style="left: {{underlineLeft}}; width: {{underlineWidth}};"></view>

通过以上代码，我们可以实现微信小程序tab切换时下划线的动画效果。当切换不同的tab时，下划线会通过动画效果实现平滑的移动和改变宽度的效果，从而提升用户的交互体验。