微信小程序 点击切换tab跟随动画

<view class='tabbox'>
	<view wx:for="{{title}}" class='tab {{currentIndex==index?"tabTrue":""}}' bindtap='changeTab' data-aa='{{index}}'>
		{{item}}
	</view>
	<view class='b' style='left:{{left}}px;transform: translateX({{width}}rpx);'></view>
</view>

data: {
    title: ["全部", "待结算", "已结算", "已退款", "状态说明"],
    currentIndex: "0",
    left: "0",
    width: "",
  },
  changeTab: function (e) {
    console.log(e)
    this.setData({
      currentIndex: e.currentTarget.dataset.aa
    })
    this.changeline(e)
  },

  changeline: function () {
    const query = wx.createSelectorQuery()
    var _this = this
    query.select('.tabTrue').boundingClientRect()
    query.exec(function (res) {
      _this.setData({
        left: res[0].left
      })
      console.log(res[0].left)
    })

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      left: this.data.left,
      width: this.data.width = (750 / this.data.title.length - 64) / 2 //设置偏移 64是横线的宽度
    })
  },

.topwrap{
  position: fixed;
  left: 0;
  width: 100%;
}
.tabbox {
  background: #fff;
  display: flex;
  flex-direction: row;
  width: 100%;
  position: relative;
  padding-bottom: 10rpx;
}

.tabTrue {
  color: red;
}

.tab {
  padding: 20rpx 0;
  width: 20%;
  text-align: center;
}

.b {
  background: red;
  height: 4rpx;
  width: 64rpx;
  position: absolute;
  bottom: 0;
  left: 50%;
  transition: all .2s linear;
}