CommunityApp/pagesM/comps/dt_scroll_tab.vue

<template>
  <view>
  <scroll-view scroll-x :scroll-into-view="aim" :scroll-with-animation="true" class="dt-tab-scroll-wrap">
    <view class="tab-wrap">
      <block v-for="(item, idx) in dataList" :key="idx">
        <view :id="'tab'+idx" 
          class="tab-item" 
          :class="{
            'active':current==idx,
            'active-line':conf.isActiveLine && current==idx
          }"
          :style="{'width':conf.width}" 
          @tap="tapTabItem(idx)">{{item}}</view>
      </block>
    </view>
  </scroll-view>
  </view>
</template>
<script>
export default {
  props:{
    config:{
      type:Object,
      default:{}
    },
    current:{// 支持 .sync
      type:Number,
      default:0
    },
    dataList:{
      type:Array,
      default:()=>{
        return [] // ['全部','优惠券','好物券','商品','会员卡']
      }
    }
  },
  data(){
    return {
      conf:{}
    }
  },
  watch:{
    config:{
      deep:true,
      handler:(n,o)=>{
        if(n){
          this.conf = Object.assign({
            width:'20%'
          },n)
        }
      }
    },
  },

  computed:{
    aim(){
      let aimIdx = this.current+2
      if(this.current <= 2){
        return 'tab'+ 0
      }
      console.log('aim',61)
      if(aimIdx > this.dataList.length){
        console.log(63,'tab'+ this.dataList.length)
        return 'tab'+ (this.dataList.length-1)
      }
      console.log(66)
      return 'tab'+ (this.current - 2)
    },
  },
  methods:{
    tapTabItem(idx){
      this.$emit('update:current',idx)
      this.$emit('change',idx)
    },
  },
  created(){
    if(this.config){
      this.conf = Object.assign({
        width:'20vw'
      },this.config)
    }
  },
}
</script>

<style lang="scss">
.dt-tab-scroll-wrap{
  width:100vw;
  background-color:#fff;

  .tab-wrap{
    display:flex;
    width:max-content;
    white-space: nowrap;
    height:90upx;
    line-height:90upx;
    font-size:28upx;
    .tab-item{
      position:relative;
      width:20vw; 
      text-align:center;
      // padding:0 44upx;
    }
    .tab-item.active{
      color:$base;
    }
    .tab-item.active-line:before{
      position:absolute;
      bottom:0;
      left:50%;
      transform: translateX(-50%);
      width:80upx;
      height:4upx;
      border-radius:2upx;
      background-color:$base;
      content:'';
    }
    // .tab-item.active:before{
    //   position:absolute;
    //   bottom:0;
    //   content:'';
    // }
  }
}
</style>