<view class="shop-type-tabs">
    <view class="active" style="left: {{activeIndex * 33.33 +'%'}};"></view>
    <view class="type-tabs">
        <view class="type-tab {{ activeIndex == index ? 'active-tab-text' : '' }}" data-dvy-type="{{item.value}}" data-index="{{index}}" bindtap="changeDistributionMode" wx:for="{{distributionMode}}" wx:key="{{item.value}}">{{item.label}}</view>
    </view>
</view>

const app = getApp();
Page({
    /**
     * 页面的初始数据
     */
    data: {
        distributionMode: [{
            label: "鞋子",
            value: 1
        }, {
            label: "衬衫",
            value: 1
        }, {
            label: "连衣裙",
            value: 1
        }],
        activeIndex: 0, //配送方式tab下标
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {},
    // 切换配送方式
    changeDistributionMode(e) {
        let attr = e.currentTarget.dataset
        this.setData({
            activeIndex: attr.index
        })
    },
})

.shop-type-tabs {
    width: 288rpx;
    height: 56rpx;
    background: #d8d8d8;
    border-radius: 16rpx;
    position: relative;
    margin: 30rpx auto;
  }
  .shop-type-tabs .type-tabs {
    position: absolute;
    left: 0;
    display: flex;
    justify-content: space-between;
    z-index: 2;
  }
  .shop-type-tabs .type-tab {
    width: 96rpx;
    height: 56rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    line-height: 56rpx;
    text-align: center;
    transition: color 0.5s;
  }
  
  .shop-type-tabs .active {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 96rpx;
    height: 56rpx;
    background: linear-gradient(153deg, #ffac24 0%, #ff9b3a 100%);
    box-shadow: inset -2rpx -2rpx 4rpx 0rpx rgba(235, 156, 85, 0.25),
      inset 2rpx 2rpx 4rpx 0rpx rgba(255, 255, 255, 0.25);
    border-radius: 16rpx;
    font-weight: bold;
    transition: left 0.6s;
  }
  .shop-type-tabs .active-tab-text {
    color: white;
  }