手写微信小程序tab选项卡(过渡效果)

效果如下：

<view class="barTitle">
      <view class="industryBar">
        <view wx:for="{{industryTypeList}}" wx:key="index" class="industryBarItem">
          <view class="barItemName {{activeIndex==index?'active':''}}" bindtap="clickTabItem" data-index="{{index}}">{{item.name}}view>
        view>
      view>
      <view class="industryLine" style="left:{{lineLeft}}vw">
        <view class="itemLine">view>
      view>
    view>

//页面初始数据
data:{
// 字数字典
    industryTypeList: [{
        id: 1,
        name: "字数随机",
        nameSize: ''
      },
      {
        id: 2,
        name: "两个字",
        nameSize: '2'
      },
      {
        id: 3,
        name: "三个字",
        nameSize: '3'
      },
      {
        id: 4,
        name: "四个字",
        nameSize: '4'
      }
    ],
    lineLeft:0,//滑动条外层容器左间距变量
}
// 点击tab项触发事件
  clickTabItem(e) {
    // console.log(e)
    let index = e.currentTarget.dataset.index
    this.setData({
      activeIndex: index,//修改激活状态tab下标
      lineLeft:index*25,
    })
  },

.barTitle {
  width: 100%;
  height: 97rpx;
  position: sticky;
  top: 0;
  background-color: #fff;
}
.barTitle .industryBar {
  width: 100%;
  display: flex;
  position: relative;
}
.barTitle .industryBar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1rpx solid #E5E5E5;
  scale: (1, 0.5);
  bottom: 0;
  height: 1rpx;
}
.barTitle .industryBar .industryBarItem {
  height: 97rpx;
  width: 25%;
  position: relative;
  display: flex;
  justify-content: center;
}
.barTitle .industryBar .industryBarItem .barItemName {
  line-height: 97rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #333333;
  width: 140rpx;
  text-align: center;
}
.barTitle .industryBar .industryBarItem .active {
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #05A4FF;
}
.barTitle .industryLine {
  position: absolute;
  bottom: 0;
  width: 25%;
  height: 5rpx;
  left: 0;
  transition: all 0.2s;
  display: flex;
  justify-content: center;
}
.barTitle .industryLine .itemLine {
  width: 140rpx;
  height: 5rpx;
  background: #05a4ff;
  border-radius: 2rpx;
}