applet tab underline animation

          <ytab bind:handleClick="tabClick"
                    wx:if="{
    
    {tabsReal.length>0}}"
                    placeholder
                    sliderWidth="{
    
    {40}}"
                    tabDefaultTextColor="#333333"
                    tabActiveTextColor="#333333"
                    leftstab="{
    
    {false}}"
                    tabFontSize="28"
                    tabIndex="{
    
    {tabIndex}}"
                    tabs="{
    
    {tabsReal}}"
                    tabunderlineColor="#FF7440" />

var sliderWidth = 58; // 需要设置slider的宽度，用于计算中间位置。单位（rpx）
Component({
    
    
  options: {
    
    
    addGlobalClass: true, // 同意样式受外部影响
  },
  /**
     * 组件的属性列表
     */
  properties: {
    
    
    // 是否需要fixed布局
    fixed: {
    
    
      type: Boolean,
      value: false
    },
    // 设置slider的宽度, 同时需要在less中设置宽度
    sliderWidth: {
    
    
      type: Number,
      value: 36
    },
    // tab项
    tabs: Array,
    // tab项默认字体颜色
    tabDefaultTextColor: {
    
    
      type: String,
      value: '#666666'
    },
    // 选中项字体颜色
    tabActiveTextColor: {
    
    
      type: String,
      value: '#000000'
    },
    // 选中项字体是否加粗
    tabActiveTextBold: {
    
    
      type: Boolean,
      value: true
    },
    // 字体大小
    tabFontSize: {
    
    
      type: Number,
      value: 24
    },
    // 选中项下划线颜色
    tabunderlineColor: {
    
    
      type: String,
      value: '#ff7007'
    },
    // 选中项索引
    tabIndex: {
    
    
      type: Number,
      value: 0
    },
    // 占位背景色
    placeBgColor: {
    
    
      type: String,
      value: '#ffffff'
    },
    // tab居左排 非均分
    leftstab: {
    
    
      type: Boolean,
      value: true
    }
  },

  /**
     * 组件的初始数据
     */
  data: {
    
    
    tabWidth: 0,
    sliderOffset: 0,
    sliderLeft: 0,
    currentView: 0
  },
  observers: {
    
    
    tabIndex(_activeTab) {
    
    
      var len = this.data.tabs.length;
      if (len === 0)
        return;

      var currentView = _activeTab - 1;
      if (currentView < 0)
        currentView = 0;

      if (currentView > len - 1)
        currentView = len - 1;

      this.setData({
    
    currentView: currentView});
      this.location()
    },
    tabs(tables){
    
    
      this.location()
    }
  },
  ready: function () {
    
    
    this.location()
  },

  /**
     * 组件的方法列表
     */
  methods: {
    
    
    tabClick(e) {
    
    
      let {
    
    index} = e.currentTarget.dataset;
      if(this.data.leftstab){
    
    
        this.setData({
    
    
          tabIndex: index,
          sliderOffset: (this.data.tabWidth * index)
        });
      }else{
    
    
        this.setData({
    
    
          tabIndex: index,
          sliderOffset: (this.data.tabWidth * index)
        });
      }

      this.triggerEvent('handleClick', {
    
    index: index});
    },
    location(){
    
    
      let tabWidth =0;
      if(this.data.leftstab){
    
    
        // leftstab  小于2一边倒距左边 大于2均分
        tabWidth = this.data.tabs.length >= 2 ? 100 : 750 / this.data.tabs.length;

      }else{
    
    
        // 全部均分占满
        tabWidth =  750 / this.data.tabs.length;

      }
      this.setData({
    
    
        tabWidth: tabWidth,
        sliderLeft: (tabWidth - this.data.sliderWidth) / 2,
        sliderOffset: tabWidth * this.data.tabIndex
      });
    },
  }
});

// out: ./index.wxss, compress: true

.plugin-tab-ul {
    
    
    background: #fff;
    white-space: nowrap;
    position: relative;
    // padding-bottom: 14rpx;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    &.plugin-flex {
    
    
        // z-index: 99;
        position: fixed;
    }
    .plugin-tab-li {
    
    
        display: inline-block;
        text-align: center;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 36rpx;
        font-weight: 400;
        color: #666666;
        margin-right: 0rpx !important;
    }
    .plugin-tab-slider {
    
    
        position: absolute;
        content: '';
        left: 0;
        top: 76rpx;
        width: 36rpx;
        height: 8rpx;
        border-radius: 4rpx;
        -webkit-transition: -webkit-transform 0.3s;
        transition: 0.3s;
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
    }
}
.plugin-tab-placeholder {
    
    
    height: 88rpx;
}


<scroll-view class="plugin-tab-ul {
    
    {fixed?'plugin-flex':''}}" enable-flex scroll-into-view="id_{
    
    {currentView}}" scroll-with-animation scroll-x="true">
    <block wx:for="{
    
    {tabs}}" wx:key="value">
        <view  bindtap="tabClick" class="plugin-tab-li" data-index="{
    
    {index}}" id="id_{
    
    {index}}" style="width:{
    
    {tabWidth}}rpx;color:{
    
    { tabIndex === index ? tabActiveTextColor:tabDefaultTextColor}};font-weight:{
    
    { (tabIndex === index&&tabActiveTextBold) ? 500:400}};font-size:{
    
    {tabFontSize}}rpx;margin-right:40rpx">{
    
    {
    
    item.label}}</view>
    </block>
    <view class="plugin-tab-slider" style="width:{
    
    {sliderWidth}}rpx;left: {
    
    {sliderLeft}}rpx; transform: translateX({
    
    {sliderOffset}}rpx); -webkit-transform: translateX({
    
    {sliderOffset}}rpx);background-color:{
    
    {tabunderlineColor}};"></view>
</scroll-view>
<view class="plugin-tab-placeholder" style="background:{
    
    {placeBgColor}}" wx:if="{
    
    {fixed}}"></view>