uniapp 自定义封装tab

效果图

image.png

image.png
image.png

思路
滑块位置=居中的位置+每一项的宽度乘以当前索引
组件代码

<template>
  <view>
    <view class="tab-box">
      <view class="active-bar" :style="{'transform':`translateX(${translateX}px)`,'width':`${width}px`,'height':`${drawHeight}px`}"></view>
      <view :class="['tab-item',activeIndex === index ?'active':'']" v-for="(item,index) in tab" :key="index" @click="handleChange(item,index)">{{ item }}</view>
    </view>
    <!-- 自提 -->
    <slot name="pick" v-if="activeIndex===0"></slot>
    <!-- 配送 -->
    <slot name="dispatching" v-if="activeIndex===1"></slot>
  </view>
</template>

<script>
/** 
 * activeIndex 选中索引
 * tab tab 数据 字符串数组
 * drawWidth 底部滑条宽度
 * drawHeight 底部滑条高度
 */
  export default {
    props:{
      activeIndex:{
        type: Number,
        default: -1,
      },
      tab:{
        type:Array,
        default:[]
      },
      drawWidth:{
        type:String,
        default:''
      },
      drawHeight:{
        type:String,
        default:'1'
      }
    },
    computed:{
      //滑动条的宽度
      width(){
        if(this.drawWidth){
          return this.drawWidth
        }else{
          return this.tabWidth/this.tab.length
        }
      }
    },
    data(){
      return {
        translateX:0,
        active:this.activeIndex,
        //tab的宽度
        tabWidth:0
      }
    },
    created(){
      this.getWidth()
      if (this.drawWidth) {
        let query = uni.createSelectorQuery().in(this);
        //选择id
        let that = this;
        query.select('.tab-box').boundingClientRect(function(rect) {
          that.translateX = (rect.width / that.tab.length)/2-Number(that.width)/2
        }).exec()
      }
    },
    methods:{
      handleChange(item,index){
        if(this.drawWidth){
          let query = uni.createSelectorQuery().in(this);
          //选择id
          let that = this;
          query.select('.tab-box').boundingClientRect(function (rect) {
            // 滑块位置=居中的位置+每一项的宽度乘以当前索引
            let width=(rect.width / that.tab.length)/2 - Number(that.width)/2
            that.translateX=width+(rect.width / that.tab.length)*index
          }).exec()
        }else{
          this.translateX=index*this.width
        }
        this.$emit('update:activeIndex',index)
        this.$emit('change',item)
      },
      getWidth(){
          let query = uni.createSelectorQuery().in(this);;
          //选择id
          let that = this;
           query.select('.tab-box').boundingClientRect(function (rect) {
            that.tabWidth=rect.width
          }).exec()
      }
    }
  }
</script>

<style lang="scss" scoped>
.tab-box{
  display: flex;
  box-sizing: border-box;
  height: 86rpx;
  position: relative;
  background-color: #fff;
  .active-bar{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3rpx;
    background-color: #FF4B40;
    transition: all .3s
  }
  .tab-item{
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    line-height: 86rpx;
    flex: 1;
    text-align: center;
    border-bottom: 1rpx solid #EEEEEE;
  }
  .active{
    color:#FF4B40;
  }
}
</style>